jQuery:如何正确使用 .stop() 函数？

Question

在此页面上:

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

当您将鼠标悬停在“Informationen”和“Über ins”上时，它会显示一个子菜单。当您将鼠标移开时，它会隐藏。通常，我对 jQuery 对我所做的每个悬停进行排队有问题，然后它只是继续为所有这些悬停设置动画。我尝试实现 stop()，但我就是无法让它正常工作。

这是我正在使用的代码:

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

谢谢!

Answer 1

您需要在两个方向上 .stop() 来停止队列，否则悬停的 mouseenter 部分会继续对其动画进行排队。另外，由于您要切换，因此可以像这样缩短它:

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