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

Question

我是一个绝对的 jQuery 菜鸟。我一直在关注向我的网站添加 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

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

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);

这会通过setTimeout() 增加 500 毫秒的延迟，并仅使用 $.data() 将计时器 ID 与元素一起存储，当将鼠标悬停在元素中时，它将清除超时并且在您结束之前不会再次运行它out...所以你必须离开元素 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

});