5

在本页面：

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>

谢谢！

4

2 回答 2

4

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

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

您将需要.stop()onul元素，因为这就是动画。试试这个，你会发现它还是有点笨拙，因为它正在重置动画而不是排队。另一种方法是防止队列，就像这样使用:visibleand: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; 
});
于 2010-04-02T15:24:04.867 回答
1

我相信你也必须放在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;
    });
于 2010-04-02T15:10:19.453 回答