javascript – 防止事件被不必要地触发

$('#menu > li').hover(function(){
     $(this).find('ul').slideDown();
});

$('#menu > li').mouseleave(function(){

     $(this).find('ul').slideUp();
});

这工作正常,但如果我悬停/离开< li>菜单的项目很多次,非常快,一旦我停下来,我会看到它上下滑动的次数和我徘徊的次数一样多,

请观看此类视频捕捉

http://www.screenr.com/dkes

¿怎么可以预防？

解决方法:

您可以使用stop来停止当前动画.您还可以组合两个事件处理程序,只使用hover(可以使用2个参数,第一个是在mouseenter上运行的函数,第二个是在mouseleave上运行的函数)：

$('#menu > li').hover(function() {
    $(this).find('ul').stop(true, true).slideDown();
}, function() {
    $(this).find('ul').stop(true, true).slideUp();
});

第一个参数是clearQueue,当你反复悬停时,它会停止无休止地排队的动画.第二个参数是jumpToEnd,它强制任何当前正在运行的动画在开始新动画之前结束.

这是simple example.