延迟后淡出jQuery菜单答案

【问题标题】：Fade out jQuery menu after delay延迟后淡出jQuery菜单
【发布时间】：2010-11-30 06:25:00
【问题描述】：

我正在开发一个 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 );
    }  
  );
});

一秒钟后出现警报，但菜单并未淡出。

【问题讨论】：

我只是在想，这可能是因为“this”指向了setTimeout函数中的其他东西吗？
是的，没错。你得到了窗口。
你可以使用.children('ul')而不是.find('>ul')顺便说一句。

标签： jquery menu hover delay settimeout

【解决方案1】：

window.setTimeout()，所以 this 指的是窗口对象。

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

【讨论】：

【解决方案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');
    }  
  );
});

【讨论】：

这看起来很酷，谢谢！但是我有一个问题：我希望在完全离开菜单时超时，但是如果我从一个菜单项移动到下一个菜单项，我想立即关闭旧菜单 - 这可能吗？
嗯，不确定这是否是我需要的。我的意思是如果菜单已经打开，我想在每个菜单出现之前消除延迟。所以第一次鼠标悬停会有一个短暂的延迟（以防止在刷过去时打开菜单）。但是如果一个菜单是打开的，移动到下一个菜单会立即显示它而没有延迟。
您可以检查菜单的状态（通过样式或检查其动画“:animated”伪选择器）或存储布尔标志。布尔标志可能更快更简单地实现。