遅延の後にjQueryのメニューをフェードアウト
-
12-09-2019 - |
質問
私はあなたがトップレベルの項目にカーソルを移動するときにフェードjQueryのドロップダウンメニューに取り組んでいます。あなたは離れてマウスを移動すると、メニューが瞬時に消えないように、私はそれを設定したいです。私はこのコードを持っています:
$(document).ready(function(){
$('ul#menu > li').hover(
// mouseover
function(){
$(this).find('>ul').fadeIn('fast');
},
// mouseout
function(){
setTimeout( function(){
alert('fadeout');
$(this).find('>ul').fadeOut('fast')
}, 1000 );
}
);
});
秒後にアラートが発生したが、メニューはフェードアウトされていません。
解決
window.setTimeoutは()、これは、ウィンドウオブジェクトを参照します。
// mouseout
function(){
var el=this;
setTimeout( function(){
alert('fadeout');
$(el).find('>ul').fadeOut('fast')
}, 1000 );
}
他のヒント
hoverIntent のを見てください。それはあなたの設定によってmouseover
/ mouseout
イベントの動作をより細かく制御を与えるでしょう。
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 500, // number = milliseconds delay before onMouseOut
};
$(document).ready(function(){
$('ul#menu > li').hoverIntent(
// mouseover
function(){
$(this).find('>ul').fadeIn('fast');
},
// mouseout
function(){
$(this).find('>ul').fadeOut('fast');
}
);
});
所属していません StackOverflow