Arrêtez la superposition des animations jQuery

J’ai une boîte d’options qui plane en haut à droite de la page Web. Son opacité est fixée à 10% pour ne pas gêner les utilisateurs. Quand ils survolent (mouseenter), j’utilise jQuery pour le fondre en fondu et glisser le contenu (et l’inverse pour mouseout).

S’ils le font de manière répétée, l’animation se superpose et vous pouvez parfois restr dans une situation où votre souris est immobile, mais la boîte est en mouvement.

Comment puis-je contourner cette situation?

Voici comment je configure actuellement les animations

$("#dropdown").mouseenter(function() { $(this).fadeTo('fast',1); $("#options").slideDown(); }); $("#dropdown").mouseleave(function() { $(this).fadeTo('fast',0.1); $("#options").slideUp(); }); 

Remarque J’utilise uniquement jQuery et pas d’autres plugins.

Appelez stop pour mettre fin aux animations existantes avant de commencer une nouvelle. Vous devriez également probablement utiliser le survol au lieu de mouseenter / mouseleave.

 $("#dropdown").hover(function() { $(this).stop().fadeTo('fast',1); $("#options").stop().slideDown(); }, function() { $(this).stop().fadeTo('fast',0.1); $("#options").stop().slideUp(); }); 

Vous pouvez utiliser la méthode stop qui arrêtera l’animation et effacera la queue d’animation.

 $("#dropdown").mouseenter(function() { $(this).stop(true).fadeTo('fast',1); $("#options").stop(true).slideDown(); }); $("#dropdown").mouseleave(function() { $(this).stop(true).fadeTo('fast',0.1); $("#options").stop(true).slideUp(); }); 

Vous pouvez également consulter le plugin hoverintent

Le problème avec l’utilisation de stop before a fadein() , comme dans cet exemple:

 $("#button").hover(function () { $("#light").stop().fadeIn(); }, function () { $("#light").stop().fadeOut(); }); 

Est-ce que stop () arrêtera le fondu de sortie quelle que soit l’opacité à laquelle l’élément s’est fondu lorsque l’état de survol est modifié et recommencera à la même opacité lors du survol de nouveau

Le résultat est que plusieurs survols rapides effaceront éventuellement l’élément et ne se reproduiront plus.

Vous pouvez utiliser la méthode d’ stop , je pense.

Arrêtez l’animation en cours d’exécution sur les éléments correspondants.