如何設置此菜單的鼠標懸停延遲？

-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

如何設置此菜單的鼠標懸停延遲？

回答

相關問題