0

我有一个导航，我想要一个类似于selfridges的背景停电。

我在这里设置了基本功能

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 选择器吗？例如，将所有这些#nav li 视为一个元素？

谢谢。

＃＃＃编辑

由于 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 回答