JQuery动画队列从不停止

Question

我已经使用JQuery创建了一个简单的下拉菜单，按照教程。 LINK： http://wabism.com/development/jquerydropdown/

它的jQuery代码是这样的：

$('body').ready(function() { 

       // Add the 'hover' event listener to our drop down class 
     $('.dropdown').hover(function() { 
         // When the event is triggered, grab the current element 'this' and 
         // find it's children '.sub_navigation' and display/hide them 
      $(this).find('.sub_navigation').slideToggle(); 
     }); 
    }); 

下拉正常工作与1个错误。如果快速滚动出菜单项3到4次，它会执行所有3或4个滑动窗口（）。我怎样才能克服这个问题？

Answer 1

在动画之前使用.stop()方法。

正如您所描述的那样，jQuery中的动画将被排队，并且所有这些动画都将被执行，除非您明确指定要停止任何挂起的动画。你会使用.stop()函数来做到这一点。在你的情况你应该写：

$(this) 
.find('.sub_navigation') 
.stop() 
.slideToggle(); 

它也有一些参数，可以给你更细粒度的控制。请参阅here。