延迟后淡出jQuery菜单 [英] Fade out jQuery menu after delay

问题描述

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

I'm working on a jQuery drop-down menu that fades in when you hover on the top-level items. I want to set it so that when you move the mouse away the menu doesn't disappear instantly. I have this code:

$(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 );
    }  
  );
});

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

After a second the alert happens, but the menu isn't faded out.

推荐答案

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

window.setTimeout(), so this refers to the window object.

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

这篇关于延迟后淡出jQuery菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！