jQuery:如何正确使用.stop()函数? [英] jQuery: how to properly use .stop() function?

问题描述

在此页面上:

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

当您将鼠标悬停在"Informationen"和Überins"上时，它将显示一个子菜单.当您将鼠标移开时，它会隐藏.通常，我对jQuery排队时遇到的每个问题都有疑问，然后它会继续使所有这些悬停动画.我尝试实现stop()，但是我无法使其正常工作.

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>

谢谢！

推荐答案

您需要双向.stop()来停止队列，否则悬停的mouseenter部分会继续对其动画进行排队.另外，由于要切换，因此可以将其缩短如下:

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

您需要在ul元素上使用.stop()，因为这就是动画.尝试此操作，您会发现它仍然有些笨拙，因为它正在重置动画而不是排队.一种替代方法是使用 :visible 和 :hidden 选择器...我更喜欢这种效果，但取决于您:)

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

这篇关于jQuery:如何正确使用.stop()函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！