延迟后淡出jQuery菜单

Question

我正在研究一个jQuery下拉菜单，当您将鼠标悬停在顶层项目上时，该下拉菜单会淡入。我想设置它，以便当您移动鼠标时，菜单不会立即消失。我有这样的代码：

$(document).ready(function(){ 
    $('ul#menu > li').hover(
    // mouseover 
    function(){ 
     $(this).find('>ul').fadeIn('fast'); 
    }, 
    // mouseout 
    function(){ 
     setTimeout(function(){ 
     alert('fadeout'); 
     $(this).find('>ul').fadeOut('fast') 
     }, 1000); 
    } 
); 
}); 

一秒钟后发生警报，​​但菜单没有淡出。

Answer 1

window.setTimeout（），所以这指的是窗口对象。

// mouseout 
function(){ 
    var el=this; 
    setTimeout(function(){ 
    alert('fadeout'); 
    $(el).find('>ul').fadeOut('fast') 
    }, 1000); 
} 

Answer 2

看看hoverIntent。它会给你mouseover/mouseout事件通过配置的行为进行更好的控制：

var config = {  
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
    interval: 200, // number = milliseconds for onMouseOver polling interval  
    timeout: 500, // number = milliseconds delay before onMouseOut  
}; 

$(document).ready(function(){ 
    $('ul#menu > li').hoverIntent(
    // mouseover 
    function(){ 
     $(this).find('>ul').fadeIn('fast'); 
    }, 
    // mouseout 
    function(){ 
     $(this).find('>ul').fadeOut('fast'); 
    } 
); 
});