jQuery的鼠标移动淡入/淡出元素取消淡入淡出的元素的鼠标悬停

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

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

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

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