jquery如果發生什麼事取消延遲（setTimeout）事件

Question

用簡單的英語，當一個元素被懸停時，此代碼將會啓動。當它懸停時，我添加一個類並顯示該元素，然後5秒鐘後，我反轉everthing：即淡出之前顯示的內容並刪除之前添加的類。

$("#it").addClass('somestyle').show(); 
setTimeout(function(){ 
    $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); }); 
}, 5000); 

• 是我的代碼清潔或哈克？
• 如果I元素在這5個延遲秒內再次懸停，如何取消這些延遲操作（淡出和班級移除）。如果它再次徘徊，我不希望計劃的延遲行動實際發生。

Answer 1

宣佈退出功能

var timer; 

，然後在函數內部：

$("#it").addClass('somestyle').show(); 
clearTimeout(timer); 
timer=setTimeout(function(){ 
    $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); }); 
}, 5000); 

有了這個代碼首先清除超時，然後你再設置它，所以這個功能被觸發時，它會再次等待。

Answer 2

本文討論了褪色許多方法/動畫懸停：

http://greg-j.com/2008/07/21/hover-fading-transition-with-jquery/

也看到它的外觀樣品：

http://greg-j.com/static-content/hover-fade-redux.html

也有一個類似的問題here，使用此解決方案：

$('.icon').hover(function() { 
    clearTimeout($(this).data('timeout')); 
    $('li.icon > ul').slideDown('fast'); 
}, function() { 
    var t = setTimeout(function() { 
     $('li.icon > ul').slideUp('fast'); 
    }, 2000); 
    $(this).data('timeout', t); 
}); 

Answer 3

當您懸停你可以設置一個標誌，所以懸停

IsHovering = 1; 

當懸停結束，

IsHovering = 0; 

那麼只有在您的逾運行代碼

if(IsHovering==0)