jQuery: Wie funktioniert die Funktion .stop() richtig?

Question

Auf dieser Seite:

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

, wenn Sie über "Informationen" und "Über Ins" schweben, zeigt es ein Untermenü. Wenn Sie die Maus wegbewegen, wird sie ausgeblendet. Normalerweise habe ich ein Problem damit, dass jQuery jeden einzelnen Hover, den ich mache, in die Warteschlange stellt, und dann animiert er alle diese Hover weiter. Ich habe versucht, stop() zu implementieren, aber ich kann es einfach nicht richtig funktionieren.

Dies ist der Code ich verwende:

<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> 

Dank!

Answer 1

Sie müssen .stop() in beiden Richtungen um die Warteschlange zu stoppen, da sonst der mouseenter Teil des Hover hält Warteschlangen es Animationen ist. Auch, weil Sie Makeln, können Sie es verkürzen, wie dies unten:

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

Sie würden die .stop() auf den ul Elemente benötigen, denn das ist, was belebend. Versuchen Sie dies, Sie werden sehen, dass es noch ein wenig klobig ist, weil es die Animation zurücksetzt, anstatt sich in die Warteschlange zu stellen. Eine Alternative ist, um die Warteschlange zu verhindern, wie dies die :visible und :hidden Selektoren ... ich diesen Effekt bevorzugen, aber bis zu Ihnen :)

$('#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

Ich glaube, Sie müssen stop(true,true) auf den Hover-Over-Bereich auch setzen. Es unterbricht dann andere Animationen, die gerade ausgeführt werden, um seine eigenen auszuführen, es sei denn, ich täusche mich.

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