Reprise de la glissade au milieu du glissement

Question

<div id="nav" class="roundbox"> 
    <ul class="dropdown"> 
     <li class="dropdown"> <a href="#" class="dropdown-toggle"> 
      <div class="dashdiv"> 
      <label> 
       <p align="center" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px;" class="dash">&#9733;&#9733;&#9733;</p> 
      </label> 
      </div> 
     </a> 

      <ul class="dropdown-menu"> 
       <li class="t stuff"> <a href="#">Main</a> 

       </li> 
       <li class="e stuff"> <a href="#">News</a> 

       </li> 
       <li class="t stuff"> <a href="#">History</a> 

       </li> 
       <li class="e stuff"> <a href="#">Contact</a> 

       </li> 
       <li class="t"></li> 
       <li class="e stuff"> <a href="http://www.graceland.edu" target="_blank">GU Site</a> 

       </li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
      </ul> 
      <div class="footdiv"> 
       <p class="foot1" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px;"> <span class="time" style="vertical-align: middle;"></span> 

       </p> 
       <p class="foot" style="margin-top: 0px; margin-bottom: 0px;"> <span class="date"></span> 

       </p> 
      </div> 
     </li> 
    </ul> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
    $('li.dropdown').hover(
      function() 
    { 
      $(this).find('ul').stop().slideDown(2000); 
     }, 
     function() 
    { 
      $(this).find('ul').stop().slideUp(2000); 
     } 
     ) 
</script> 
</div> 

Alors ... J'essaie de nettoyer un peu mon projet et j'ai un problème qui voudrait une résolution. J'ai un div qui, survolé, glisse vers le bas pour afficher un menu de navigation du site et glisse vers le haut en sortant de la div. Cela fonctionne bien, mais mon seul problème est que si je passe la souris sur le div, laissez-le glisser vers le bas, puis sortez et ré-entrez dans le div pendant qu'il est en train de glisser vers le haut. L'opération jquery en attente se termine. Voici mon . Le code a l'air un peu poilu, mais vous aurez l'idée. J'ai supprimé autant de code que possible afin de ne pas avoir à creuser trop pour trouver des éléments. J'utilise jQuery 1.9.1. Idéalement, ce que j'aimerais voir, c'est que le menu glisse vers le bas sans complètement terminer la fonction de glissement. Des idées?

Answer 1

Le code qui se dilate et se contracte le div est le suivant: (trouvé en partie html de jsFiddle)

<script> 
$('li.dropdown').hover(
     function() 
     { 
      $(this).find('ul').stop().slideDown(2000); 
     }, 
     function() 
     { 
      $(this).find('ul').stop().slideUp(2000); 
     }) 
</script> 

Analysons ce code un peu:

Si nous hover sur li.dropdown, puis

function(){ $(this).find('ul').stop().slideDown(2000); } //Will execute. 

Si nous hover sur li.dropdown, puisPar conséquent, le code ne couvre pas les animations «imbriquées».

Il y a plusieurs façons de résoudre ce problème, mais je pense que le plus beau serait:

<script> 
     $('li.dropdown').hover(function() 
     { 
     $(this).find('ul').stop().slideToggle(2000); 
     }); 
    </script> 

Vous pouvez trouver un exemple de travail dans this jsFiddle.

J'espère que cela répond à votre question.