如何设置此菜单的鼠标悬停延迟？

-1

我有下拉菜单，我想在mouseout上添加延迟。所以当你将鼠标悬停在菜单上时，它会显示下拉菜单，但是当你从菜单中移动鼠标时，我想有一些延迟。如何设置此菜单的鼠标悬停延迟？

我已经搜索了这一整天，并没有发现任何东西，期望hoverIntent插件，我不知道使用。

这里是我的代码：

HTML：

<ul id='nav'> 
    <li><a href='#'>Top level 1</a></li> 
    <li><a href='#'>Top level 2</a> 
    <ul> 
     <li><a href='#'>Sub 2 - 1</a></li> 
     <li> 
     <a href='#'>Sub 2 - 2</a> 
     <ul> 
      <li> 
      <a href='#'>Sub 2 - 2 - 1</a> 
      <ul> 
       <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li> 
       <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li> 
       <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li> 
       <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li> 
      </ul> 
      </li> 
      <li><a href='#'>Sub 2 - 2 - 2</a></li> 
      <li> 
      <a href='#'>Sub 2 - 2 - 3</a> 
      <ul> 
       <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li> 
       <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li> 
       <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li> 
       <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li><a href='#'>Sub 2 - 3</a></li> 
    </ul> 
    </li> 
</ul>

的Jquery：

$(document).ready(function(){     
    $("#nav ul ").css({display: "none"}); 
    $("#nav li").hover(
     function() 
      { 
       $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle(); 
      }, 
     function(){ 
      $(this).find('ul:first').css({visibility: "hidden"}); 
     } 
);

请假设，我是大菜鸟的javascript :)

谢谢！

编辑：

我已经尝试了所有的解决方案，并没有工作期望从帕特丽夏的解决方案。现在我得到奇怪的行为，因为你可以看到在http://pastehtml.com/view/aykmhy9ae.html

来源

2011-06-27 mailinator

我看到很多下面完全有效的答案。你应该发布一个[JSfiddle]（http://jsfiddle.net/），以便每个人都可以看到并使用相同的代码。 – Sparky

我可以建议逐渐淡出比延迟更好。在这种情况下，尽量不要使用以下的你visibility: "hidden"代码

$(this).find('ul:first').fadeOut('slow');

小提示：当您显示使用jQuery /隐藏的元素，你只需要使用以下命令：

hide(), show(), toggle() 
fadeIn(), fadeOut(), fadeToggle() 
slideIn(), slideOut(), slideToggle()

设置display和visibility CSS属性是徒劳的。

来源

2011-06-27 18:44:49

你想要的东西是这样的：

 $("#nav li").hoverIntent({ 
      over: function(e){ 
       $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle(); 

      }, 
      out:function(e){ 
       $(this).find('ul:first').css({visibility: "hidden"}); 

      }, 
      timeout: 1000 
     });

，其中1000是你想拥有的鼠标移开动作

来源

2011-06-27 18:46:02 Patricia

有延迟，但不知何故:) 现在我得到奇怪的行为，你可以看到http://pastehtml.com/view/aykmhy9ae.html – mailinator

非常有趣，我认为你的一些CSS悬停行为是干扰，但我不完全确定。 – Patricia

我在CSS看牛：D 即时考虑切换到另一个菜单脚本..你有什么建议吗？我的要求是，它的工作也没有JS，工作在IE7 ..也必须是轻量级的:) – mailinator

的延迟毫秒数这增加了5秒（5000毫秒）延迟...

$(this).find('ul:first').delay(5000).css({visibility: "hidden"});

编辑：

Read more here.

来源

2011-06-27 18:46:14 Sparky

你只需要使用的setTimeout从激发延迟功能，并且还确保，如果他们离开盘旋超时将被清除。这会做1000毫秒的超时。

$(document).ready(function(){     
    $("#nav ul ").css({display: "none"}); 
    var onHoverTimeoutFunction = null; 
    $("#nav li").hover(
     function() 
      { 
       onHoverTimeoutFunction = setTimeout(function() {$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();},1000); 
      }, 
     function(){ 
      clearTimeout(onHoverTimeoutFunction); 
      $(this).find('ul:first').css({visibility: "hidden"}); 
     } 
);

来源

2011-06-27 18:47:30 Porco

$(function() { 
     var timer = null; 
     $("li", "#nav").hover(
      function() { 
       var element = $(this); 
       timer = window.setTimeout(function() { element.find("ul:first").slideToggle(); }, 500); 
      }, 
      function() { window.clearTimeout(timer); $(this).find('ul:first').slideToggle(); } 
     ); 

      $("ul", "#nav").css("display", "none"); 
    });

来源

2011-06-27 19:21:07

如何设置此菜单的鼠标悬停延迟？

回答

相关问题