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>到slideDown当服务div悬停。它需要延迟，以便在用户误将鼠标移出时不会消失。但是，如果他们鼠标移到另一个服务div则可见一个需要走马上去以腾出空间给新的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）东西是关于什么的。我一直试图在mouseover上检测一个事件，检查是否有其他“serviceList”是.active，然后隐藏它。这很有效，除非你在“服务”之间切换太快。我甚至接近这样做的权利？

感谢

Answer 1

你应该尝试使用hoverIntent插件。这是它的设计目的。

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

注意，这是基本相同的hover()方法，但它包含你正在寻找的延迟。