Create a Realistic Hover Effect With jQuery

For one of the projects I’m currently working on with Rareview, we wanted to add a rising hover effect to a set of icon links. Using jQuery’s animate effect, I experimented with icons that have reflections and others with shadows. Here is a demo with two examples:

The HTML and CSS are both straightforward and have a structure and style common to many web navigations and menus (for the sake of post length, I’m not including HTML/CSS code examples here but you are free to snoop around in the demo or view the files in the download below).

In a nutshell, the JS appends the reflection/shadow to each <li>, then animates the position and opacity of these elements and the icon links on hover. I’ve added .stop() to eliminate any queue buildup from quickly mousing back and forth over the navigation.


 Begin jQuery

$(document).ready(function() {

/* =Reflection Nav
-------------------------------------------------------------------------- */

    // Append span to each LI to add reflection

    $("#nav-reflection li").append("");

    // Animate buttons, move reflection and fade

    $("#nav-reflection a").hover(function() {
        $(this).stop().animate({ marginTop: "-10px" }, 200);
        $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
    },function(){
        $(this).stop().animate({ marginTop: "0px" }, 300);
        $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
    });

/* =Shadow Nav
-------------------------------------------------------------------------- */

    // Append shadow image to each LI

    $("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" alt="" width="81" height="27" />');

    // Animate buttons, shrink and fade shadow

    $("#nav-shadow li").hover(function() {
    var e = this;
        $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
        $(e).find("a").animate({ marginTop: "-10px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
    },function(){
    var e = this;
        $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
        $(e).find("a").animate({ marginTop: "0px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
    });

// End jQuery

});


Please note, for the purposes of this quick demo, I did not bother including support for IE6.

View Demo or Download