Molto spesso quando si scrive codice jQuery, succede che le animazioni si sovrappongono, la qual cosa ci può creare dei problemi.
Questa modalità di escuzione è dovuta al fatto che jQuery esegue il codice linea per linea, ma nel passare da una linea alla successiva non attende il completamento dell’esecuzione della linea precedente.
Infatti se noi applichiamo allo stesso oggetto in sequenza (per esempio) un fadeIn(500) e un animate({css},400), su due linee seguenti, viene naturale pensare che il prima venga completato il fadeIn() e dopo mezzo secondo venga eseguita l’animazione sulla proprietà css, in realtà il funzionamento non è proprio questo, le varie amimazioni vengono accodate ed eseguite in sequenza senza attendere il completamento dell’animazione precedente.
Per risolvere questo problema abbiamo a disposizione la funzioni di callback, che ci consentono di definire esplicitamente che un’azione deve essere esguita al termine di una animazione.
Le funzioni di callback si definiscono all’interno del metodo con una sintassi di questo genere:
$(‘selettore’).metodo(tempo, callback())
Ecco un esempio di codice:
$('#myID').fadeIn(500);
$('#myID2').animate({height:250},500);
Con questo codice le due animazioni vengo eseguite in contemporanea.
$('#myID').fadeIn(500,function(){
$('#myID2').animate({height:250},500);
});
Mentre utilizzando le funzioni di callback l’animazione sull’altezza verrà esguita dopo il fadeIn.