xミリ秒後にマウスを操作する方法はありますか？

Question

私は現在、私がやる必要があるものの多少の作業バージョンを持っています。基本的に、単一のサブリストのみがいつでも拡張可能な拡張可能なアコーディオンです。

これは私が持っているものですが、上から下にゆっくりと移動すると問題が発生します。 1つの要素が閉じ、カーソルが下の要素に当たると、ジャンプします。

jQuery(document).ready(function() { 
 
    
 
    $(".nav li").hover(
 
     function(){ 
 
      $(this).css('cursor','pointer'); 
 
     }, 
 
     function() { 
 
      $(this).css('cursor','auto'); 
 
     } 
 
    ); 
 

 
    $('.nav').find('ul').hide().end(); 
 
    
 
    $('.nav').find('li').hover( 
 
     function(){ 
 
      $(this).children("ul").stop(true, true).slideDown('500') 
 
     }, 
 
     function(){ 
 
      $(this).children("ul").stop(true, true).slideUp('500') 
 
     }   
 
    ); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<ul class="nav"> 
 
    <li> 
 
     list Item 1 
 
     <ul> 
 
      <li>sublist1 item 1 
 
      </li> 
 
      <li>sublist1 item 2 
 
      </li> 
 
      <li>sublist1 item 3 
 
      </li> 
 
      <li>sublist1 item 4 
 
      </li> 
 
      <li>sublist1 item 5 
 
      </li> 
 
      <li>sublist1 item 6 
 
      </li> 
 
     </ul> 
 
    </li>    
 
    <li> 
 
     list Item 2 
 
     <ul> 
 
      <li>sublist2 item 1 
 
      </li> 
 
      <li>sublist2 item 2 
 
      </li> 
 
      <li>sublist2 item 3 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     list Item 3 
 
     <ul> 
 
      <li>sublist3 item 1 
 
      </li> 
 
      <li>sublist3 item 2 
 
      </li> 
 
      <li>sublist3 item 3 
 
      </li> 
 
      <li>sublist3 item 4 
 
      </li> 
 
      <li>sublist3 item 5 
 
      </li> 
 
      <li>sublist3 item 6 
 
      </li> 
 
      <li>sublist3 item 7 
 
      </li> 
 
      <li>sublist3 item 8 
 
      </li> 
 
     </ul> 
 
    </li>

私はのsetTimeoutとてclearTimeoutを使っていくつかの仕事を見てきましたが、私は、トリガー要素は次の関数に通過させることができませんでした。

私はそのアイデアがここに

http://forum.jquery.com/topic/jquery-how-to-clear-settimeout

Answer 1

slideDownとslideUpを呼び出す前に、ちょうどdelay(500).を追加 - 500は動作するはずミリ秒

$('.nav').find('li').hover( 
    function(){ 
     $(this).children("ul").stop(true, true).delay(500).slideDown('500') 
    }, 
    function(){ 
     $(this).children("ul").stop(true, true).delay(500).slideUp('500') 
    }   
); 

の数です！

Answer 2

でしまったあなたはこの答えを見てみたいことがありページ： Delay jquery hover event?

勧告HoverIntentプラグイン

を使用することがありますが

Answer 3

私は個人的にこのコードを書いています。ドレイクの提案のようにHoverIntentを使用するのではなく、私はこのようにもっと学びます。

各オブジェクトのデータプロパティを0に設定し、x時間だけそれを増やします。マウスオーバーを検出し、別のデータプロパティをtrueに設定したいとします（timeプロパティに1を加える関数でこのプロパティを使用します; trueに設定すると、マウスが要素の上にあり、増加させたい）。マウスが要素から離れると、そのデータプロパティがfalseに設定され、timerプロパティがリセットされます。

タイマーのプロパティが一定の数に達すると、x時間後に何か機能を実行します。