防止事件

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，它强制任何当前正在运行的动画在开始新动画之前结束。

这是simple example。

Answer 2

这一切都归结为你有一个变量，将存储您的滑动状态，并将防止进一步的请求发生，如果滑动已经发生。

在滑动开始处设置标志并使用回调来取消设置标志。

var closing = false; 
$('#menu > li').mouseleave(function(){ 
    closing = true; 
    $(this).find('ul').slideUp(null, function(){ 
     closing = false; 
    }); 
}); 

// then in the hover method you would just check the value of closing to see if to allow or not opening. 

James Allardice早些揭露了第二个想法，如果它有效，我更喜欢它。