<div>にカーソルを合わせると、テキストが表示されます。マウスを離すと、テキストがフェードアウトします。ただし、が完了する前にマウスが再び<div>に入る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');
});
});
});