jQuery - 停止正在進行中的動畫（fadeOut），並在鼠標快速進入/離開時再次顯示

我有一個<div>當鼠標懸停時，會顯示一些文字。當鼠標離開時，文本淡出。但是，如果鼠標在fadeOut完成之前再次輸入<div>，則文本將不再顯示。jQuery - 停止正在進行中的動畫（fadeOut），並在鼠標快速進入/離開時再次顯示

我知道hoverintent，但我不想使用它，因爲它會給mouseEnter/mouseLeave事件帶來輕微的延遲。

難道沒有辦法，在mouseEnter上，它只是清除fadeOut並再次顯示文本？

我現在嘗試使用超時：

var timeouts = {}; 

$(document).ready(function(){ 
    $('#wrapper').hover(function(){ 
    clearTimeout(timeouts['test_hover']); 
    $('#text').show(); 
    }, function(){ 
    timeouts['test_hover'] = setTimeout(function(){ 
     $('#text').fadeOut('slow'); 
    }); 
    }); 
});

jsbin：http://jsbin.com/upotuw/5

視頻：http://www.youtube.com/watch?v=7RLrz1bEQuU

編輯：問題是需要這兩個參數傳遞給stop()功能：stop(true,true)

最終工作的代碼如下：

var timeouts = {}; 

$(document).ready(function(){ 
    $('#wrapper').hover(function(){ 
    clearTimeout(timeouts['test_hover']); 
    $('#text').stop(true,true).show(); 
    }, function(){ 
    timeouts['test_hover'] = setTimeout(function(){ 
     $('#text').fadeOut('slow'); 
    }); 
    }); 
});

http://jsbin.com/upotuw/7

來源

2012-04-16 waffl