jquery bascule les éléments hover avec le délai de masquage

Question

J'ai mis ce code ensemble à partir d'un extrait d'un autre endroit, donc je ne fais peut-être pas très bien ça. J'ai plusieurs années div qui ressemble à ceci:

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

Je veux que <ol>-slideDown lorsque les services div est survolaient. Il a besoin d'un délai pour qu'il ne disparaisse pas si l'utilisateur se trompe de souris. Mais si elles la souris sur un autre service div puis le visible dont on a besoin pour aller immédiatement pour faire place à la nouvelle serviceList Voici ce que je maintenant:

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


     }); 

J'ai une mauvaise compréhension de la portée, donc je ne suis pas sachez à quoi sert le truc get (0). J'ai essayé d'avoir un événement sur mouseover qui vérifie si n'importe quel autre "serviceList" est .active, puis cachez-le. Cela fonctionne, sauf si vous basculez entre "services" trop vite. Suis même proche de faire ça bien?

Merci

Answer 1

Vous devriez essayer d'utiliser le plug-in hoverIntent. C'est ce pour quoi il est conçu.

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

Notez que ceci est essentiellement la même que la méthode hover(), mais il comprend le retard que vous recherchez.