はjQueryの - 進捗（フェードアウト）でアニメーションを停止し、マウスが入ったときに再び表示さ/迅速

私はホバー時に、いくつかのテキストを表示すること<のdiv >を持って去ります。マウスが離れると、テキストがフェードアウトします。 fadeOutが完了する前に、しかし、マウスは再び<のdiv >に入った場合、テキストが再び表示されません。はjQueryの - 進捗（フェードアウト）でアニメーションを停止し、マウスが入ったときに再び表示さ/迅速

私は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

EDIT：問題はstop()関数に、両方のパラメータを渡すために必要とされました：stop(true,true)

012次のように

最終作業コードは次のとおりです。

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