javascript - JQuery 动画队列永不停止

Question

按照教程，我使用 JQuery 创建了一个简单的下拉菜单。链接： http ://wabism.com/development/jquerydropdown/

它的 jQuery 代码是这样的：

$('body').ready(function() {

                // Add the 'hover' event listener to our drop down class
        $('.dropdown').hover(function() {
                        // When the event is triggered, grab the current element 'this' and
                        // find it's children '.sub_navigation' and display/hide them
            $(this).find('.sub_navigation').slideToggle(); 
        });
    });

下拉菜单工作正常，有 1 个错误。如果您快速滚动和退出菜单项 3 或 4 次，它会执行所有 3 或 4 个 slidetoggle() 。我怎样才能克服这个问题？

Answer 1

.stop()动画前使用方法。

正如您所描述的，jQuery 中的动画将被排队并执行所有动画，除非您明确指定要停止任何待处理的动画。你可以使用.stop()函数来做到这一点。在你的情况下，你应该写：

$(this)
.find('.sub_navigation')
.stop()
.slideToggle();

它也有一些参数可以为您提供更细粒度的控制。见这里。