jqueryホバーメニューfadein / hideドロップダウン - jquery、ドロップダウンメニュー、メニュー、ホバー、htmlリスト

私は少しjqueryを持っている

    $(".dropdown").hide();

$("#mainnav ul li").hover(function(e){
$(this).children(".dropdown").fadeIn(250);
}, function(e) {
$(this).children(".dropdown").hide();
});

これは、親LIが上に乗ったときに、各メニューのドロップインを消して隠す。

私はこれがjqueryが十分に丈夫であると確信していません。 時には、ドロップダウンは、マウスがスピードで親liを横切って移動しても隠れません。

このコードの信頼性を向上させるためにできることはありますか？

ありがとう

回答：

xFortyFourxが述べたように、あなたは .stop() メソッドを呼び出してキューをクリアします。 jQueryとして ドキュメンテーション stopメソッドはアニメーションだけで動作するので、 .animate() の代わりに .fadeIn() そして .fadeOut()

$("#mainnav ul li").hover(
function() {
$(this).children(".dropdown").stop().animate({opacity: 1});
},
function() {
$(this).children(".dropdown").stop().animate({opacity: 0});
}
);

を使用して .stop() 〜と .fadeIn() 半透明モードで凍結要素が発生します。両方の状況のライブプレビューをご覧ください： http://jsfiddle.net/stichoza/faqNt/

多分このコードはあなたを助けることができます：

    $(".dropdown").hide();
$("#mainnav ul li").hover(function(){
$(this).children(".dropdown").stop().fadeIn(250);
}, function() {
$(this).children(".dropdown").stop().hide();
});

または

$("#mainnav ul li").hover(function(){
if($(this).children(".dropdown").css("display") == "none"){
$(this).children(".dropdown").fadeIn(250);
} else {
$(this).children(".dropdown").stop().hide();
}
});

がんばろう