Cómo crear un efecto de hover realista con jQuery

En este tutorial vamos a ver cómo crear dos efectos para que se muestren al hacer hover sobre un grupo de enlaces con iconos, en la misma línea que los efectos que poseen docks como ObjectDock o RocketDock.

Usando los efectos de animación de jQuery, vamos a experimentar con dos tipos de iconos: unos tienen un efecto de reflejo en su parte inferior y los otros tienen sombra.

Tanto el HTML como el CSS que vamos a usar son bastante claros, y tienen una estructura y estilo que son comunes a muchos menús de navegación web. No vamos a incluir el código en este artículo pero podéis echarle un ojo a la página de ejemplo o bien descargaros los archivos de ejemplo para verlos.

jQuery

// Inicio jQuery

$(document).ready(function() {

/* Menú con reflejo ----------------------------------------------- */

    // Agregar un SPAN a cada LI para añadir el reflejo

    $("#nav-reflection li").append("<span></span>");

    // Animar los botones, mover el reflejo y atenuarlo

    $("#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);
    });

/* Menú con Sombra ----------------------------------------------- */

    // Agregar la imagen de la sombra a cada LI

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

    // Animar los botones, y encoger y atenuar la sombra

    $("#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);
    });

// Fin jQuery

En pocas palabras, el .JS añade un reflejo o una sombra a cada <li>, y luego anima la posición y opacidad de esos elementos y de los iconos-enlace al hacer hover. Hemos añadido .stop() para eliminar cualquier cola resultante de pasar el ratón de un lado a otro rápidamente por el menú de navegación.

Como nota final, tened en cuenta que no nos hemos molestado en dar soporte para IE6.

o bien los archivos de ejemplo.

Fuente: Create a Realistic Hover Effect with jQuery [adrian pelletier]