¿Cómo forzar a las animaciones de jQuery a ejecutarse simultáneamente?

Question

Tengo una página web con animaciones (JQuery Animation) por todo el lugar. Una secuencia de animación típica puede contener tres o cuatro objetos que se animan de forma independiente al mismo tiempo. El problema que estoy enfrentando es que la puesta en cola de las animaciones no es predecible. Algunas de las animaciones se ejecutan simultáneamente, mientras que otras no.

que estoy haciendo algo así como

setTimeout(function(){ 
     //animations 
    }, delay); 

en muchos lugares sólo para tratar de agrupar las animaciones. Incluso cuando se usa esto, algunas de las animaciones dentro del bloque de código no se ejecutan simultáneamente.

¿Hay alguna manera de forzar las animaciones para que se ejecuten al mismo tiempo? ¿Hay alguna manera de llenar la cola con animaciones y luego ejecutarlas al mismo tiempo? ¿Hay alguna documentación exhaustiva de cómo funciona esto realmente?

EDIT: Sample code Advertencia: El código es desordenado

La pregunta está mirando el código, ¿cómo saber cuál de las animaciones se va a ejecutar de forma simultánea?

Answer 1

Este ejecutar simultáneamente (pero no si ya hay una animación en curso sobre el objeto):

$('.blabla .2').animate({opacity: 0.3, fontSize: 20}, 800); 

Y si quieres estar 100% seguro de que está animado de inmediato (nótese la cola: falso):

$('.blabla .1').animate({fontSize: 20},{queue:false,duration:800}); 

También puede hacer esto. (Todavía se ejecutará simultáneamente)

$('.blabla .1') 
    .animate({fontSize: 20},{queue:false,duration:800}) 
    .animate({opacity: 0.4},{queue:false,duration:800}); 

Esto se ejecuta uno después del otro.

$('.blabla .1').animate({opacity: 0.3}, 800).animate({fontSize: 20}, 800); 

también lo hace esta

$('.blabla .2').animate({opacity: 0.3}, 800, function() { 
    $('.blabla .3').animate({opacity: 0.3}, 800); 
}); 

Espero haber respondido a su pregunta.

Lo siento por todas las ediciones, soy nuevo aquí.

Answer 2

Utilice la opción step. Le da una función y después de cada paso de la animación actual, ejecutará esa función. Por lo tanto, puedes animar allí. Link to docs.