jquery - 向这段 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 与元素一起存储，当鼠标悬停在元素中时，它会清除超时并且不会再次运行它，直到你结束......所以你必须离开元素 500 毫秒才能隐藏它。

或者，用 hoverIntent plugin 做一些非常类似的事情这就是针对这个问题的。