将MouseOut延迟添加到这个jQuery(菜单导航)

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(),当在元素中回来时,它将清除超时并且不会再次运行它,直到你结束...所以你必须是将元素关闭500ms以使其隐藏.

或者,做一些与hoverIntent插件非常相似的东西,这就是针对这个问题.