jQuery: jak prawidłowo korzystać z funkcji .stop()?

Question

Na tej stronie:

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

po najechaniu "Informationen" i "Über ins", to pokazuje podmenu. Kiedy odsuniesz mysz, ukrywa się. Zazwyczaj mam problem z kolejkowaniem jQuery za każdym wywołanym przeze mnie unoszeniem, a potem po prostu animuje wszystkie te zawieszki. Próbowałem zaimplementować stop(), ale po prostu nie mogę go uruchomić.

Jest to kod używam:

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

Dzięki!

Answer 1

Trzeba .stop() w obu kierunkach, aby zatrzymać kolejkę, w przeciwnym razie mouseenter część najechaniu wciąż w kolejce to animacje. Ponadto, ponieważ jesteś przełączania można skrócić go tak:

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

Będziesz potrzebować .stop() na ul elementów, ponieważ to, co się animacji. Spróbuj tego, zobaczysz, że wciąż jest nieco niepewny, ponieważ resetuje animację zamiast kolejkowania. Alternatywą jest zapobieganie kolejkę, jak to za pomocą selektorów :visible i :hidden ... Wolę ten efekt, ale do ciebie :)

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

Wierzę, że musisz umieścić stop(true,true) również na części najechanej. Następnie przerywa inne animacje w tym momencie, aby wykonać własne, chyba że się mylę.

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