Come forzare l'esecuzione di animazioni jQuery contemporaneamente?

Question

Ho una pagina Web con animazioni (JQuery Animation) dappertutto. Una sequenza di animazione tipica può contenere tre o quattro oggetti che si animano in modo indipendente nello stesso momento. Il problema che sto affrontando è che la messa in coda delle animazioni non è prevedibile. Alcune animazioni sono in esecuzione contemporaneamente mentre altre non lo sono.

sto facendo qualcosa di simile

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

in molti posti solo per cercare di raggruppare le animazioni. Anche quando si utilizza questo, alcune delle animazioni all'interno del blocco di codice non vengono eseguite contemporaneamente.

C'è un modo per forzare l'esecuzione di animazioni contemporaneamente? C'è un modo per riempire la coda di animazioni e poi eseguirle contemporaneamente? Esiste una documentazione completa di come questa cosa funzioni effettivamente?

EDIT: Sample code Attenzione: il codice è disordinato

La questione sta esaminando il codice di come fai a sapere quale delle animazioni stanno per eseguire contemporaneamente?

Answer 1

Questa corsa contemporaneamente (ma non se c'è già un'animazione in corso sul oggetto):

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

E se si vuole essere sicuri al 100% che è animato subito (notare la coda: false):

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

È anche possibile farlo. (Funzionerà ancora contemporaneamente)

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

Questo si esegue uno dopo l'altro.

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

Quindi questo

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

spero che risponde alla tua domanda.

Siamo spiacenti per tutte le modifiche, sono nuovo qui.

Answer 2

Utilizzare l'opzione step. Gli dai una funzione, e dopo ogni passo dell'animazione corrente, eseguirà quella funzione. Così puoi animarti lì. Link to docs.