jQuery, ¿cómo hacer animaciones síncronas?

Tengo un diseño de página que se parece a esto

| image || image || image | 

Cuando pasas el cursor sobre una de las imágenes, quiero hacer una animación para obtener algo como esto

 | image-hover || image || image | 

o

 | image || image-hover || mage | 

o

 | image || image || image-hover | 

He usado .animate({width: width}, speed) y funciona bien. Pero hay una cosa que me está molestando, las animaciones no son síncronas. El resultado es que el borde derecho parpadea de un lado a otro. En el medio de la animación, el ancho total es aproximadamente 3 píxeles más delgado de lo que debería.

He intentado ajustar las velocidades, no ayuda con el parpadeo, y no vi mucha mejora en la animación general.

Si hay alguna diferencia, estoy usando divs con background-image y overflow: hidden; Envuelto en tags li . Estoy ampliando tanto el li como el div (la etiqueta li también contiene texto).

La pregunta real:
¿Es posible hacer que las animaciones sean sincrónicas, para que sean al mismo tiempo agradables y suaves?

El código:

 $(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); 

He intentado hacer el recorrido primero y asignar los elementos a dos variables, aquellas para hacer más grandes y aquellas para hacer más pequeñas, pero eso no mejoró realmente las cosas.

Creo que te estás refiriendo al problema de acumulación de cola allí. Intente usar el método de stop antes del método de animiate , por ejemplo:

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

Más información:

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

En cuanto a la animación suave, puedes ir a jQuery Easing Plugin .

En el medio de la animación, el ancho total es aproximadamente 3 píxeles más delgado de lo que debería.

tratar de establecer la flexibilización a lineal.