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

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; 
});