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

发布于 2024-08-27 03:34:18 字数 687 浏览 5 评论 0原文

在此页面上：

http://www.arvag.net/old/smsbox.de/< /a>

当您将鼠标悬停在“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>

谢谢！

原文

On this page:

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

when you hover over "Informationen" and "Über ins", it shows a sub menu. When you move mouse away, it hides. Normally, I have problem with jQuery queuing every single hover I make, and then it just keeps on animating all those hovers. I tried to implement stop(), but I just can't get it to work properly.

This is the code I am using:

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

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一城柳絮吹成雪 2024-09-03 03:34:18

您需要在两个方向上使用 .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; 
});

You need to .stop() in both directions to stop the queue, otherwise the mouseenter part of the hover keeps queuing it's animations. Also, since you're toggling, you can shorten it down like this:

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

You would need the .stop() on the ul elements, since that's what's animating. Try this, you'll see it's a bit clunky still because it is resetting the animation instead of queuing. An alternative is to prevent the queue, like this using the :visible and :hidden selectors...I prefer this effect, but up to you :)

$('#nav_menu > .center > ul > li').hover(function() {
   $(this).children('ul:hidden').slideDown('slow');
}, function() {
   $(this).children('ul:visible').slideUp('slow');
}).click(function(){ 
  return false; 
});

回复收藏 0 原文

千纸鹤带着心事 2024-09-03 03:34:18

我相信您还必须将 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;
    });

I believe you have to put stop(true,true) on the hover-over portion as well. It then interrupts other animations going on at the moment to execute its own, unless I'm mistaken.

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

回复收藏 0 原文

~没有更多了~