Question

我已编写此代码，当鼠标处于休眠状态时，导航菜单淡出50％不透明度：

var hidden, fadenav, dimNav = function () {
    hidden = true;
    $('#main-nav').animate({'opacity': 0.5}, 200);
};

$('document').ready(function () {
    dimNav();
    $('body').on('mousemove', function (e) {
        if (hidden) {
            $('#main-nav').animate({'opacity': 1}, 200);
            hidden = false;
        }
        if (fadenav !== null) {
            clearTimeout(fadenav);
        }
        fadenav = setTimeout(dimNav, 500);
    });
});

我想要做的就是当用户将鼠标放在#main-nav元素上时不要褪色。

我试过这个无济于事：

$('#main-nav').on('mouseover mouseout', function (e) {
    if (e.type === 'mouseover') {
        clearTimeout(fadenav);
    } else {
        fadenav = setTimeout(dimNav, 500);
    }
});

有没有人知道如何做到这一点？

Answer 1

这当然不是更少的代码，但它可能更直接：

$('#main-nav').on('mousemove',function(e){
    if(hidden){
        $('#main-nav').animate({'opacity': 1}, 200);
        hidden = false;
    }  
    clearTimeout(fadenav);
    e.stopPropagation();
});

添加而不是：

$('#main-nav').on('mouseover mouseout', function (e) {
    if (e.type === 'mouseover') {
        clearTimeout(fadenav);
    } else {
        fadenav = setTimeout(dimNav, 500);
    }
});

你根本不需要上课。

以下是我的工作示例：http://jsfiddle.net/TbwSA/1

编辑：我意识到你甚至不需要鼠标输出事件。

Answer 2

我自己发现了这个解决方案，并认为值得其他人知道：

首先，你需要做类似的事情：

$('#main-nav').on('mouseover', function (e) {
    if (!$('#main-nav').hasClass('hovered')) {
        $('#main-nav').addClass('hovered');
    }
}).on('mouseout', function () {
    if ($('#main-nav').hasClass('hovered')) {
        $('#main-nav').removeClass('hovered');
    }
});

然后将dimNav()函数更改为：

dimNav = function() {
    if (!$('#main-nav').hasClass('hovered')) {
        hidden = true;
        $('#main-nav').css('opacity', '0.5');
    }
};

如果有人能想出比这更好的方法，请提供帮助！

jQuery mousemove淡入/淡出元素取消淡入淡出元素鼠标悬停

2 个答案: