JQuery, comment créer des animations synchrones?

J'ai une mise en page qui ressemble à quelque chose comme ça

| image || image || image | 

Lorsque vous parcourez l'une des images, je veux faire une animation pour obtenir quelque chose comme ça

 | image-hover || image || image | 

ou

 | image || image-hover || mage | 

ou

 | image || image || image-hover | 

J'ai utilisé le .animate({width: width}, speed) et ça marche bien. Mais il y a une chose qui me dérange, les animations ne sont pas synchrones. Le résultat est que la bordure droite clignote d'avant en arrière. Au milieu de l'animation, la largeur totale est d'environ 3 pixels plus mince qu'elle ne le devrait.

J'ai essayé de peaufiner les vitesses, cela n'aide pas le scintillement, et je n'ai pas vu beaucoup d'amélioration sur l'animation globale.

Si cela fait toute la différence, j'utilise les divs avec l' background-image et le overflow: hidden; Enveloppé dans des étiquettes li . Je fais à la fois le li et le div plus large (la balise li contient aussi du texte.)

La question actuelle:
Est-il possible de rendre les animations synchrones, de sorte qu'elles se produisent en même temps agréables et douces?

Le code:

 $(this).animate({width: 450}, 495) .parent("li").animate({width: 450}, 495) .next("li").animate({width: 225}, 500) .find(".class").animate({width: 225}, 500) .parent("li").next("li").animate({width: 225}, 500) .find(".class").animate({width: 225}, 500); 

J'ai d'abord essayé de traverser et d'attribuer les éléments à deux variables, celles qui augmentent et celles qui sont plus petites, mais cela n'a pas vraiment amélioré les choses.

Je pense que vous faites référence à un problème d' accumulation de file d' attente là-bas. Essayez d'utiliser la méthode d' stop avant la méthode animiate , par exemple:

 $(...).stop().animate({width: width}, speed) 

Plus d'informations:

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

En ce qui concerne l'animation en douceur, vous pouvez aller pour jQuery Easing Plugin .

Au milieu de l'animation, la largeur totale est d'environ 3 pixels plus mince qu'elle ne le devrait.

Essayez de régler l'allongement vers linéaire.