jQuery’s stop () semble bloquer les animations qui n’ont pas encore été mises en queue

Comment fonctionne stop() de jQuery?

Si vous regardez ici (http://jsfiddle.net/hWTT6/) , lorsque vous survolez la boîte bleue principale, elle devrait virer au rouge et, lorsque vous la survolez, elle devrait disparaître. Le problème est que le rouge disparaîtra complètement (puis redeviendra bleu) même si la souris s’est éteinte avant la fin du premier fondu. Le problème peut être plus clairement vu avec l’effet de glissement. Survolez le “bouton” de la diapositive et la boîte principale glissera en bleu, passez la souris en arrière, elle glissera en arrière. Mais essayez de survoler de temps en temps, avant et après la première animation. Vous verrez que les quatre animations sont réalisées. J’ai inclus les deux exemples ici pour montrer que ce n’est pas simplement un problème avec un effet ou quelque chose.

J’ai pensé que cela serait facilement corrigé en ajoutant un stop avant les animations, comme indiqué dans le code. Mais si je le fais, l’animation en cours s’arrêtera et la suivante ne commencera jamais. Presque comme si l’ stop bloquait une animation qui se produit après l’appel à stop .

Qu’est-ce que j’oublie ici?

Merci.

Il vous manque que .stop() accepte deux arguments. Les deux booléens, indiquant:

 - clearQueue (first) - jumpToEnd (second)

Donc, en appelant $('#foo').stop( true, true ).doSomeOtherStuff() vous devriez obtenir votre objective souhaité.

Référence: .stop()

Le problème est que le CSS se dérange en s’arrêtant à des points arbitraires.

fadeIn() , fadeOut() , slideUp() et slideDown() passent de l’état actuel à un nouvel état, puis reviennent à cet état, et non au CSS d’origine.

Vous devez redéfinir le code CSS dans un état utilisable pour continuer après le .stop (), ou spécifier plus clairement les cibles d’animation.

Comme d’autres l’ont dit, vous pouvez placer le CSS à la bonne position en vous assurant que lorsque vous arrêtez l’animation, il saute à la fin de celle-ci, au lieu de tout laisser dans un état arbitraire.

METTRE À JOUR:

Regardez le code dans cette mise à jour de votre démonstration: http://jsfiddle.net/hWTT6/5/

Ce n’est peut-être pas exactement ce que vous voulez faire, mais le truc, si vous ne voulez pas que l’animation suive son cours, est de la remettre dans un état tel qu’elle puisse continuer comme vous le souhaitez .

 $(function() { $('#fade') .mouseenter(function() { $('#fg_fade').stop().animate({ 'opacity': 0 }, 'slow', function() { $('#fg_fade').css('height', '100%'); }); }) .mouseleave(function() { $('#fg_fade').stop().animate({ 'opacity': 1, 'height': '100%' }, 'slow'); }); $('#slide_fire') .mouseenter(function() { $('#fg_fade').stop().animate({ 'height': 0 }, 'slow', function() { $('#fg_fade').css('opacity', 1); }); }) .mouseleave(function() { $('#fg_fade').stop().animate({ 'height': '100%' }, 'slow', function() { $('#fg_fade').css('opacity', 1); }); }); });

Vous pouvez définir les options stop () sur (true, true) afin d’annuler tous les événements de cue et de passer à la fin de l’animation précédente. regardez le violon: http: //jsfiddle.net/hWTT6/4/

La méthode stop peut être appelée de différentes manières:

 .stop(true); //Same as: .stop(true, false); //Empty the animation queue only //Or .stop(true,true); // Empties the animation queue AND jumps to the end //Default .stop() //Same as .stop(false,false);

Il y a peut-être une meilleure façon d’utiliser .animate à la place: Demo Here

 $(function() { $('#fade') .mouseenter(function() { $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '0'}, 'slow'); }) .mouseleave(function() { $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '1'}, 'slow'); }); $('#slide_fire') .mouseenter(function() { $('#fg_fade').stop().css('opacity', '1').animate({'height' : '0'}, 'slow'); }) .mouseleave(function() { $('#fg_fade').stop().css('opacity', '1').animate({'height' : '10em'}, 'slow'); }); });

De cette façon, l’animation s’arrête quand vous le souhaitez et exécute toujours l’animation suivante.

Le problème avec .stop puis slideUp/slideDown ou fadeIn/fadeOut est que l’animation peut se terminer prématurément et conserver une hauteur / opacité incorrecte.

Le problème est dû au fonctionnement de fadeIn , fadeOut etc. Vous pouvez vous attendre à ce qu’ils disparaissent entre 0 et 1. Cependant, en réalité, ils disparaissent entre 0 et quelle que soit l’opacité “de base”. Vous pouvez voir ceci ici:

http://jsfiddle.net/hWTT6/7/

Vous remarquerez que je règle l’opacité initiale sur .5 . Maintenant, lorsque j’appelle fadeIn il ne disparaît pas fadeIn qu’il fadeIn valeur de base .5 . Votre problème survient lorsque vous arrêtez l’animation prématurément. La “ligne de base” devient alors quelle que soit l’opacité au moment de son arrêt. Désormais, lorsque vous appelez fadeIn on mouseleave il tente de mouseleave à cette nouvelle ligne de base et constate qu’il est déjà présent. Vous pouvez voir ceci illustré en allant ici:

http://jsfiddle.net/hWTT6/8/ (original, mais avec .stop )

Si vous placez votre souris sur la slide , puis la supprimez à mi-parcours de l’animation, celle-ci s’arrêtera au milieu. Maintenant, placez votre souris sur la slide et attendez que l’animation soit terminée. Si vous retirez maintenant votre souris, vous verrez qu’elle glisse vers l’endroit où la première animation a été arrêtée. C’est parce que c’est la nouvelle “base”.

Pour résoudre ce problème, vous devez remplacer fadeIn , fadeOut , etc. par une animation plus explicite. Par exemple, utilisez fadeTo pour lui dire de passer entre 0 et 1 :

http://jsfiddle.net/hWTT6/6/

Notez que depuis que je lui dis de passer à 0 ou 1 tout fonctionne. Une chose similaire pourrait être faite pour remplacer slideUp et slideDown utilisant animate .