防止事件被不必要地触发

Question

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

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

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

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

请观看此类视频捕捉

http://www.screenr.com/dkes

¿怎么可以预防？

Answer 1

您可以使用它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,它强制任何当前正在运行的动画在开始新动画之前结束.

这是一个简单的例子.