jQuery：如何正确使用 .stop() 函数？答案

【问题标题】：jQuery: how to properly use .stop() function?jQuery：如何正确使用 .stop() 函数？
【发布时间】：2010-04-02 15:05:07
【问题描述】：

在这个页面上：

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>

谢谢！

【问题讨论】：

标签： jquery kill-process

【解决方案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; 
});

【讨论】：

是的，我试过那个简短的版本，但它没有用，所以我尝试只在悬停时停止...无论如何，这段代码现在在线，所以你可以看到它不起作用。 :(
@GaVrA - 需要将 .stop() 移动到实际动画的元素，但我提供了一个更好的选择，我认为你会活下去，试一试更新的答案。
嘿尼克！我已经发现我需要将 .stop 放在.children 后面，但就像你说的那样，它有点笨拙。这种带有 :hidden 和 :visible 的方法要好得多！ :) 所以我将使用它。谢谢！ ;)

【解决方案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;
    });

【讨论】：