gomflo

Cuando estamos construyendo un menú o cualquier otro scirpt de jQuery, es necesario tener un método robusto, con el cual se pueda definir el estado del mouseover y mouseout. Para esto utilizaremos hover().

Ejemplo de como debe ser usado:

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

Esto hace que la primera función sea ejecutada cuando el ratón pasa por encima de los elementos en la página, que comparten el nombre de la clase selectorClass, y la segunda función se ejecuta cuando el ratón sale del elemento.

Puedes usar “this” dentro de las funciones, para acceder al elemento que disparo el evento.

Hover une la primera función al evento mouseenter, y la segunda al evento mouseleave, de tal manera puedes escribir como una alternativa lo siguiente:

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

En la versión 1.4 de jQuery, es posible hacerlo en una simple función dentro de hover(), que llamará las 2 funciones anteriores mouseenter y mouseleave. De este modo puedes acortar el código aún más:

$(".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 que la función es ejecutada. Dependiendo si el número es par ó non, escoge el nivel de opacidad a utilizar en fadeTo() (1 es completamente visible).

Los tres bloques de código anteriores producen el mismo resultado:

También es una gran manera de usar las funciones toggle de jQuery como .slideToggle() y .toggleClass().