延时后淡出jQuery的菜单(Fade out jQuery menu after delay)

我的工作，当你将鼠标悬停在顶级项目淡入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');
    }  
  );
});

文章来源: Fade out jQuery menu after delay