防止事件

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早些揭露了第二個想法，如果它有效，我更喜歡它。