延迟后淡出jQuery菜单

我正在开发一个jQuery下拉菜单，当你将鼠标hover在顶级项目上时，它会淡入淡出。 我想设置它，以便当您移动鼠标时，菜单不会立即消失。 我有这个代码：

$(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（），所以这指的是window对象。

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