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

你可以这样做，给它一个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()将元素存储在元素中，当悬停在元素中时，它会清除超时并且不会运行它再一次，直到你结束...所以你必须离开元素500ms才能隐藏。

或者，做一些与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

});

将MouseOut延迟添加到这个jQuery（菜单导航）

2 个答案: