为这条jQuery添加MouseOut延迟（菜单导航）

Question

我是一个完全绝对的jQuery noob。我一直在关注一个教程，向我的网站添加一个CSS/jQuery导航菜单，并且我能够正常工作。我希望看到的唯一一件事是鼠标移出一小段时间，因为下拉菜单正在立即消失当你将鼠标移出时会让菜单有点烦人。以下是我的脚本：

function mainmenu(){ 
$(" .top-menu ul ").css({display: "none"}); // Opera Fix 
$(" .top-menu li").hover(function(){ 
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
    },function(){ 
    $(this).find('ul:first').css({visibility: "hidden"}); 
    }); 
} 

$(document).ready(function(){ 
mainmenu(); 
}); 

是否有人愿意将所需的代码添加到此脚本中。我会答应来研究你是怎么做到的，所以其实我从中学到;-D

Answer 1

你可以做这样的事情，给它一个500ms的延迟：

function mainmenu(){ 
    $(".top-menu ul ").hide(); 
    $(".top-menu li").hover(function() { 
    clearTimeout($.data(this, 'timeout')); 
    $(this).find('ul:first').show(400); 
    }, function() { 
    $.data(this, 'timeout', setTimeout($.proxy(function() { 
     $(this).find('ul:first').hide(); 
    }, this), 500)); 
    }); 
} 
$(mainmenu); 

这增加了500毫秒延迟通过setTimeout()和只存储定时器ID与元素使用$.data()，当悬停在元素，它会清除超时，并将不会再运行，直到你超出了......所以你必须离开元素为500毫秒为它隐藏。

或者，做一些与hoverIntent plugin非常相似的东西，这就是这个问题。

Answer 2

$(" .top-menu li").hover(function(){ 
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
},function(){ 

    // Note here... 
    setTimeout(function(){ 
     $(this).find('ul:first').css({visibility: "hidden"}); 
    }, 2000); 
    // 2000 is a delay time in milliseconds, change it 

});