jQuery $ .hover utilisé pour les sous-menus causant le "rebond"

Question

Je rencontre des problèmes avec la méthode jQuery hover.

Voici le code JavaScript concerné:

$("#navigation > li > ul").hide(); 
$("#navigation > li").hover(
    function() { 
     $(this).children("ul").slideDown(125); 
    }, 
    function() { 
     $(this).children("ul").slideUp(125); 
    } 
); 

est ici le code HTML correspondant:

<ul id="navigation"> 
    <li><a href="#">Top Level Item #1</a></li> 
    <li> 
     <a href="#">Top Level Item #2</a> 
     <ul> 
      <li><a href="#">Sub-Menu Item #2-1</a></li> 
      <li><a href="#">Sub-Menu Item #2-2</a></li> 
      <li><a href="#">Sub-Menu Item #2-3</a></li> 
     </ul> 
    </li> 
</ul> 

Chaque fois que vous mouseover un élément de niveau supérieur, le sous-menu en elle (le cas échéant) chutera vers le bas avec un joli effet de glissade rapide. Le problème est lorsque vous faites glisser votre souris dans le menu rapidement et gardez votre souris où le menu serait mais ne l'a pas encore atteint: le menu atteindra alors la "fin" de l'animation mouseover et rebondira vers le caché état, et répétez jusqu'à ce que vous supprimiez la souris d'où le menu déroulant serait.

Answer 1

peut-être ajouter un contrôle dans la fonction mouseout pourrait aider:

if(!$(this).children("ul").is(":animated")){ 
    $(this).children("ul").slideUp(125); 
} 

Answer 2

Vous pouvez essayer d'utiliser hoventIntent, un plugin jQuery qui aide à détecter l'intention d'un utilisateur planant au-dessus des éléments.

http://cherne.net/brian/resources/jquery.hoverIntent.html

J'ai modifié votre exemple avec lui et il semble se comporter beaucoup plus agréable. J'ai ajouté:

<script type="text/javascript" language="JavaScript" src="jquery.hoverIntent.minified.js"></script> 

et modifié la seule ligne avec vol stationnaire() à:

$("#navigation > li").hoverIntent(

Je ne pouvais pas à rebondir, et il se sentait plus comme un menu popout avec le comportement hoverIntent appliqué .

Enfin, vous pouvez essayer d'utiliser l'un des plug-ins de menu jQuery pré-construit comme ils l'ont fait tout ce travail pour vous déjà :)