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

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