Solución a problema con menú en jQuery

Por Blackned el Dic.22, 2009, en jQuery

menujquery

Bueno supongo que mas de alguno ha tenido problemas con algunas animaciones de jQuery especialmente con los métodos Mouseover / Mouseout. Bueno yo tuve un problema con un menú del tipo acordeón que mas de un dolor de cabeza me dio y finalmente me di cuenta de que la solución era bastante sencilla.

Primero el código que se encuentra generalmente en internet para los menús con animaciones.

1
2
3
4
5
6

$('.example1 .anim_queue_example a')
.hover(function() {
$(this).animate({ left: 20 }, 'fast');
}, function() {
$(this).animate({ left: 0 }, 'fast');
});

Un código bastante simple que hace maravillas. El problema de este es que al pasar el ratón por encima de cada objeto muchas veces, al momento se sacar el ratón la animación continua la cantidad de veces que este paso por encima. Esto es porque se construyo una cola de animación por cada evento del ratón.

Una solución rápida

1
2
3
4
5
6

$('.example2 .anim_queue_example a')
.hover(function() {
$(this).stop().animate({ left: 20 }, 'fast');
}, function() {
$(this).stop().animate({ left: 0 }, 'fast');
});

En este código se utiliza el método stop(). Lo que hace este método es evitar que se acumule una cola de animación, algo bastante efectivo para eliminar el problema anterior, pero esto nos lleva a otro problema. Cuando pasemos el ratón por encima del menú muy rápido no veremos la animación de todos los objetos haciendo que de cierto modo el comportamiento del menú no se vea natural.

La solución es el plugin hoverflow

1
2
3
4
5
6

$('.example3 .anim_queue_example a')
.hover(function(e) {
$(this).hoverFlow(e.type, { left: 20 }, 'fast');
}, function(e) {
$(this).hoverFlow(e.type, { left: 0 }, 'fast');
});

La gracia de este plugin es que al pasar el ratón por encima este genera una animación completa evitando la acumulación de una cola de animación.
Una animación en la cola sólo se ejecutará si se corresponde con la posición actual del ratón en “tiempo de ejecución”. Es decir, una animación mouseover sólo se ejecutará si el ratón está sobre el elemento, y una animación mouseout sólo se ejecutará si el ratón no está actualmente sobre el elemento. De lo contrario, la cola de la animación estará vacía.

Espero que esto les sirva, igual aquí les dejo una página con demos utilizando este plugin.