jQuery: cómo utilizar correctamente la función .stop()?

Question

En esta página:

http://www.arvag.net/old/smsbox.de/

cuando se pasa sobre "Informationen" y "Über ins", se muestra un submenú. Cuando alejas el mouse, se esconde. Normalmente, tengo un problema con jQuery haciendo cola con cada uno de los hover que hago, y luego sigue animando a todos los que se ciernen. Traté de implementar stop(), pero simplemente no puedo hacer que funcione correctamente.

Este es el código que estoy utilizando:

<script type="text/javascript"> 
    //<![CDATA[ 
    $(function(){ 
     $('#nav_menu > .center > ul > li').hover(function() { 
      $(this).stop(true,true).children('ul').slideToggle('slow'); 
     }).click(function(){ 
      return false; 
     }); 
    }); 
    //]]> 
</script> 

Gracias!

Answer 1

Necesitas .stop() en ambas direcciones para detener la cola, de lo contrario la parte mouseenter de la libración sigue haciendo cola es animaciones. Además, dado que usted está activando, se puede acortar abajo como esto:

$('#nav_menu > .center > ul > li').hover(function() { 
    $(this).children('ul').stop(true,true).slideToggle('slow'); 
}).click(function(){ 
    return false; 
}); 

podría necesitar el .stop() en los ul elementos, ya que eso es lo que está animando. Prueba esto, verás que todavía es un poco torpe porque está restableciendo la animación en lugar de hacer cola. Una alternativa es evitar que la cola, como esto usando los selectores :visible y :hidden ... Yo prefiero este efecto, pero depende de ti :)

$('#nav_menu > .center > ul > li').hover(function() { 
    $(this).children('ul:hidden').slideDown('slow'); 
}, function() { 
    $(this).children('ul:visible').slideUp('slow'); 
}).click(function(){ 
    return false; 
}); 

Answer 2

Creo que también tiene que poner stop(true,true) en la parte de sobrevuelo. Luego interrumpe otras animaciones que se están llevando a cabo en este momento para ejecutar las suyas, a menos que esté equivocado.

$('#nav_menu > .center > ul > li').hover(function() { 
     $(this).stop(true,true).children('ul').slideToggle('slow'); 
    },function(){ 
     $(this).stop(true,true).children('ul').slideToggle('slow'); 
    }).click(function(){ 
     return false; 
    });