0

我编写了这段代码，当鼠标处于休眠状态时，它会将导航菜单淡出到 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);
    }
});

有谁知道如何做到这一点？

4

2 回答 2

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

编辑：我意识到你甚至不需要 mouseout 事件。

于 2012-12-14T21:02:39.203 回答
0

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

首先，您需要执行类似的操作：

$('#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');
    }
};

如果有人能想到比这更好的方法，请贡献！

于 2012-12-14T20:26:30.447 回答