Question

在此页面上：

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

当您将鼠标悬停在“Informationen”和“Überins”上时，它会显示一个子菜单。当你移开鼠标时，它会隐藏。通常情况下，我对每个单独悬停的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; 
});

您需要.stop()元素上的ul，因为这就是动画效果。试试这个，你会发现它有点笨拙，因为它正在重置动画而不是排队。另一种方法是使用: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;
    });

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

2 个答案: