jQuery：如何正确使用.stop（）函数？

在本页面：

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

当您将鼠标hover在“Informationen”和“Überins”上时，它会显示一个子菜单。 当你移开鼠标时，它会隐藏。 通常情况下，我对每个单独hover的jQuery排队都有问题，然后它就会继续为所有这些hover设置动画。 我试图实现stop() ，但我无法让它正常工作。

这是我正在使用的代码：

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

谢谢！

Answer 1

你需要在两个方向都使用.stop()来停止队列，否则鼠标的鼠标中心部分会一直排队它的动画。 此外，既然你正在切换，你可以像这样缩短它：

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

你需要ul元素上的.stop() ，因为那就是动画。 试试这个，你会发现它有点笨拙，因为它正在重置动画而不是排队。 另一种方法是使用:visible和:hidden选择器阻止队列，比如这个…我更喜欢这种效果，但由你决定:)

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

我相信你也必须在stop(true,true) 。 然后它会中断正在执行的其他动画以执行它自己的动画，除非我弄错了。

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