jQuery glisser vers le haut/bas sur le bug stationnaire

Question

J'ai un grand div avec un div plus petit à l'intérieur. Le plus petit div est d'abord affiché comme caché. Lorsque l'utilisateur passe la souris sur le grand container-div, la plus petite div est animée avec les fonctions show/hide. Jusqu'à présent, tout fonctionne bien.

Cependant. La plus petite div est animée depuis le bas - donc si je laisse le curseur planer au-dessus du conteneur tout en bas, il survole l'animation de la plus petite div alors qu'elle glisse. Alors maintenant, le curseur pointe sur la plus petite div de la plus grande div, et ainsi de déclencher la fonction de masquage sur le div plus petit. Cela crée une boucle infinie d'appels show/hide en tant que div plus petit dans et hors de l'endroit où le curseur pointe.

Des idées pour éviter cela et ne pas casser le vol stationnaire sur le conteneur lorsque la plus petite div entre?

C'est ce que je veux dire:

alt text http://archivedworks.com/fileserver/jQuery_hover_showhide.jpg

Answer 1

Vous pouvez le faire comme ceci:

$("#outerDiv").hover(function() { 
    $("#innerDiv:hidden").slideDown(); //your show code 
}, function() { 
    $("#innerDiv:visible").slideUp(); //your show code 
}); 

Cette file d'attente seulement une animation cacher si elle est visible (:visible), et met en file d'attente une animation si ce n'est pas le cas (:hidden), ce qui empêche le comportement de la file d'attente/boucle que vous avez maintenant.

Answer 2

$('#idOfLargeDiv').hover(
    function() { 
     $('#idOfSmallDiv').slideDown(); 
    }, 
    function() { 
     $('#idOfSmallDiv').slideUp(); 
    } 
);