MicroTut:el método jQuery Hover

Al crear un menú de navegación, o cualquier otro script de jQuery, a menudo es necesario tener un método sólido con el que definir un estado de pasar el mouse por encima y por fuera. Aquí es donde el hover() viene el método. Así es como se usa:

$('.selectorClass').hover(
function(){
    $(this).stop().fadeTo('slow',0.4);
},
function(){
    $(this).stop().fadeTo('slow',1);
});

Esto asigna la primera función que se ejecutará cuando el mouse se mueva sobre los elementos de la página, que comparten el selectorClass nombre de clase, y el segundo se ejecuta cuando el mouse se aleja.

Puedes usar "esto" dentro de las funciones, para acceder al elemento que activó el evento.

Pasar el cursor vincula la primera función al mouseenter evento, y el segundo a mouseleave , por lo que alternativamente podría escribir esto:

$('.selectorClass').mouseenter(function(){
    $(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
    $(this).stop().fadeTo('slow',1);
});

A partir de la versión 1.4 de jQuery, ahora es posible pasar una sola función para pasar el mouse, que se llamará tanto en mouseenter como en mouseleave. De esta manera, puede acortar aún más su código escribiendo solo una función:

$('.selectorClass').hover(function(){
    this.check = this.check || 1;
    $(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});

El ejemplo anterior incrementa this.check cada vez que se ejecuta la función. Dependiendo de si el número es par o no, elige el nivel de opacidad para pasar a fadeTo() (siendo 1 completamente visible).

Este también es un gran lugar para usar las funciones de alternancia de jQuery como .slideToggle() y .toggleClass() .