このメニューのマウスオーバーで遅延を設定するにはどうすればよいですか？

Question

私はドロップダウンメニューを持っていて、私は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の:)

感謝のために大きなnoobのだと、仮定して下さい！

EDIT：

私はすべてのソリューションを試してみましたが、どれもパトリシアから解決策を期待働きました。今では私があなたが見ることができるように奇妙な動作をするhttp://pastehtml.com/view/aykmhy9ae.html

Answer 1

徐々にフェードアウトが遅延よりも優れていることを示唆することはできますか？

displayを設定

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

：あなたはjQueryのを使用して要素を表示/非表示をしているとき、あなただけの次を使用必要があります。その場合には、代わりにあなたのvisibility: "hidden"コード

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

小さな先端の次を試してみてくださいCSSのプロパティは無駄です。

Answer 2

あなたはこのような何かしたいと思います：1000あなたはこれが5秒（5000ミリ秒）遅延を加えるマウスアウトアクション

Answer 3

の遅延を持ちたいミリ秒数です

 $("#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 
     }); 

を...

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

---

EDIT：

Read more here.

Answer 4

あなただけの発射から機能を遅らせ、そしてまた、彼らは離れて置く場合、タイムアウトがクリアされていることを確認するためのsetTimeoutを使用する必要があります。これは1000msのタイムアウトを行います。

$(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"}); 
     } 
); 

Answer 5

$(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"); 
    });