0

セルフリッジと同様の背景のブラックアウトが必要なナビゲーションがあります。

ここに基本的な機能のセットアップがあります

jQuery:

jQuery('<div class="backmask"></div>').insertAfter('.wrapper');


function removeBlack() {

jQuery('.nav-container').removeClass('navmask');
jQuery('.backmask').fadeOut(300);

}

function addBlack() {

jQuery('.nav-container').addClass('navmask');
jQuery('.backmask').fadeIn(100);

}

jQuery('.nav li').hover(addBlack, removeBlack);

ただし、ある要素から別の要素にマウスを移動すると、黒の背景がそのまま維持されるのではなく、ストロボになります。

2つの関数内でさまざまな「if」ステートメントを試しましたが、ほぼ完了したと思う段階に到達し続けていますが、再び失敗します。

ps #nav li を単に #nav に変更したくないのは、ナビゲーションがナビゲーションの幅全体を引き伸ばさない場合、人々が背景を黒くするために空のスペースにマウスを合わせたくないからです。

何か案は？重要なjqueryセレクターが1つ足りないだけですか? たとえば、これらすべての #nav li を 1 つの要素として扱いますか?

ありがとう。

＃＃＃編集

mornaner からの役立つ回答以来、これは私のコードです:

jQuery('<div class="backmask"></div>').insertAfter('.wrapper');


function removeBlack() {

jQuery('.nav-container').removeClass('navmask');
jQuery('.backmask').fadeOut(200);

}

function addBlack() {

    jQuery('.nav-container').addClass('navmask');
    jQuery('.backmask').fadeIn(100);

}

jQuery('#pronav li').hover(function(){
 clearTimeout(jQuery(this).data('timeoutId'));
addBlack();
}, function(){
var nav = jQuery('#pronav li');
var timeoutId = setTimeout(function(){
    removeBlack();
}, 80);
//set the timeoutId, allowing us to clear this trigger if the mouse comes back over
nav.data('timeoutId', timeoutId);
});
4

1 に答える 1

1

この答えに基づいて私はそれをしました：

jQuery('.nav li').hover(function(){
        clearTimeout($(this).data('timeoutId'));
        addBlack();
    }, function(){
        var someElement = $('.nav li');
        var timeoutId = setTimeout(function(){
        removeBlack();
    }, 150);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId);
});

デモ

タイムアウト時間は150msで調整できますが、長すぎると感じた場合は短くすることができます。

于 2013-01-03T13:33:33.270 に答える