jquery非表示の遅延で項目を切り替える

Question

このコードを他の場所のスニペットと組み合わせて使用​​しているため、これをうまく行っていない可能性があります。 私はこのようになり、複数のdivの持っている：

<div class="services"> 
<p>...</p> 
<ol class="serviceList" style="display: none;"> 
    <li> 
    <p>service</p> 
    <ul> 
     <li>service description</li> 
    </ul> 
    </li> 
... 
</ol> 
</div> 

は私が <ol>サービス divがホバーしたとき slideDownしたいが。ユーザーが間違ってマウスを離した場合に消えないように、遅延が必要です。しかし、彼ら別のサービス divの上にマウスはその後、目に見える1は、ここで新しい serviceListのための余地を作るために、すぐに離れて行く必要があるが、私が今持っているものであれば：

$('.services').each(function() { 
      var time = 800; 
      var hideDelay = 1000; 

      var hideDelayTimer = null; 

      var beingShown = false; 
      var shown = false; 
      var trigger = $(this); 
      var info = $('.serviceList', this); 

      $([trigger.get(0),info.get(0)]).mouseover(function() { 


       if (hideDelayTimer) clearTimeout(hideDelayTimer); 
       if (beingShown || shown) { 
        // don't trigger the animation again 

        return; 
       } else { 



      info.addClass('active'); 

        // reset position of info box 
        beingShown = true; 

        info.css('zindex','2') 
        .slideDown(time, function() { 
         beingShown = false; 
         shown = true; 
        }); 
       } 

       return false; 
      }).mouseout(function() { 

       if (hideDelayTimer) clearTimeout(hideDelayTimer); 
       hideDelayTimer = setTimeout(function() { 
        hideDelayTimer = null; 

        info.css('zindex','0') 
        .fadeOut(hideDelay, function() { 
         shown = false; 
         info.removeClass('active'); 
        }); 


       }, hideDelay); 

       return false; 
      }); 


     }); 

私がいないので、私はスコープの貧しい理解していますget（0）の内容について知っています。私は他の "serviceList"が.activeであるかどうかをチェックし、それを隠すイベントをマウスオーバーで試行しようとしていました。それは、あなたが "サービス"をあまりにも速く切り替える場合を除き、機能します。この権利を行うことにも近いですか？

おかげ

Answer 1

あなたはhoverIntentプラグインを使用してみてください。これがそのために設計されたものです。これは基本的にhover()方法と同じであるが、それはあなたが探している遅延が含まれていることを

$('.services').hoverIntent(
    function() { // over 
     $(this).find('.serviceList:first').slideDown(); 
    }, 
    function() { // out 
     $(this).find('.serviceList:first').slideUp(); 
    } 
); 

注意。