Annuler toutes les animations jQuery slideUp et slideDown enfoncées

J'ai une interface qui utilise fortement l'effet jQuery slideUp et slideDown pour étendre les éléments de manière tri-state.

onmouseover: function() { this.find('.details', this).slideDown(); }, onmouseout: function() { this.find('.details', this).slideUp(); } 

Cependant, lorsque l'utilisateur déplace rapidement la souris sur ces éléments d'interface, les animations ne peuvent pas se maintenir et les objets seront glissés vers le haut et vers le bas longtemps après que la souris a quitté la zone d'interface.

Existe-t-il un moyen d'annuler toutes les animations de diapositives mises en file d'attente lorsque la souris quitte la zone de conteneur de l'élément?

Je crois que vous devriez pouvoir simplement ajouter un .stop () et ça prendra soin de cela pour vous:

 onmouseover: function() { this.find('.details', this).stop().slideDown(); }, onmouseout: function() { this.find('.details', this).stop().slideUp(); } 

La réponse que vous voulez vraiment est une combinaison de toutes les trois autres réponses.

 $("...").hover(function() { $(this).stop(true, true).slideDown(); }, function() { $(this).stop(true, true).slideUp(); }); 

Vous voulez que le true s dans l'arrêt, car ceux-ci effacent les files d'attente d'animation en attente. Si vous ne l'utilisez pas, vous trouverez que le déplacement de la souris rapidement et à plusieurs reprises à travers l'élément produira des résultats de buggy.

D'une manière générale, vous souhaitez appeler stop() lors du démarrage d'une telle animation:

 $("...").hover(function() { $(this).stop().slideDown(); }, function() { $(this).stop().slideUp(); }); 

Cela devrait être suffisant pour éviter les files d'attente d'animation longue durée.

Vous pouvez également utiliser $.clearQueue() pour effacer globalement les animations qui n'ont pas encore commencé.

En outre, si vous définissez ces sur mouseover() et mouseout() il est sans doute plus clair pour simplement utiliser l'événement hover() place.

Il est également beaucoup mieux si vous mettez des paramètres dans stop() , comme ceci: stop(true,true)

Dans mon cas, je cherchais également une solution .stop() pour la file d'attente d'animation étendue vers le haut et vers le bas. Cependant, il ne résolut toujours pas, car ce n'était pas lisse, et c'était buggy, ce qui ne le fais plus glisser.

Par conséquent, je suis venu avec une solution qui n'est pas liée à l'annulation des files d'attente, mais cela pourrait aider certains d'entre vous. La solution consiste à le faire glisser vers le bas ou vers le haut juste quand la cible d'animation n'est pas actuellement animée.

 $("#trigger").on({ mouseover: function() { $("#animationTarget").not(":animated").slideDown(); }, mouseleave: function() { $("#animationTarget").not(":animated").slideUp(); } }); 

Vous pouvez faire quelque chose comme suit: http://jsfiddle.net/3o2bsxo6/3/

JavaScript

 $('h5').each(function(){ $(this).unbind('mouseover'); //unbind previous events (prevent repeats) $(this).unbind('mouseout'); $(this).on('mouseover',function(){ if(!$(this).next('.details').is(':visible')){ //if not visible $(this).next('.details').slideDown(); //slidedown } }) $(this).on('mouseout',function(){ if($(this).next('.details').is(':visible')){ //if visible $(this).next('.details').slideUp(); //slideup } }) }) 

Html:

 <h5>Hover To Slide</h5> <p class="details"> However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area. </p> <h5>Hover To Slide</h5> <p class="details"> However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area. </p> <h5>Hover To Slide</h5> <p> However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area. </p> 

CSS:

 p{ display:none; } 

Une requête similaire a été posté dans ce fil. En utilisant

Arrêter (vrai, faux)

Vous pouvez réaliser l'effet sans bugs.

 $('#YourDiv').on('mouseenter', function(){ $(this).next().slideDown(250).stop(true, false).slideDown() }); 

J'ai supposé qu'il y a un élément après #YourDiv que vous souhaitez mettre des animations diapositives et diapositives.

Cela va sauter à l'animation du dernier événement et effacer tous les événements en attente dans la chaîne.