Le animazioni a catena in jQuery possono essere ottenute in due modi: concatenando direttamente i metodi che gestiscono le animazioni o utilizzando la funzione di callback di ciascun metodo. C'è un'importante differenza tra i due modi: con il primo otteniamo una sequenza continua di animazioni, senza ritardi, mentre con il secondo creiamo un intervallo di tempo tra un'animazione e l'altra, in quanto prima viene conclusa l'animazione corrente e poi viene aggiunta la successiva. In questo articolo vedremo quale effetto si ottiene utilizzando il primo approccio.
Abbiamo un semplice box posizionato in modo relativo, delle dimensioni di 100 x 100 pixel. Ecco le nostre animazioni:
$("#run-demo").click(function(event){
$("#test").animate({
opacity: "0.1",
left: "+=400"
}, 1200)
.animate({
opacity: "0.4",
top: "+=160",
height: "20",
width: "20"
}, "slow")
.animate({
opacity: "1",
left: "0",
height: "100",
width: "100"
}, "slow")
.animate({
top: "0"
}, "fast")
.slideUp()
.slideDown("slow")
event.preventDefault();
});
Vengono modificate l'opacità, il posizionamento orizzontale e verticale nonchè le dimensioni dell'elemento. L'effetto finale è una semplice alternanza di sliding in verticale. Come si può notare, i metodi vengono concatenati senza utilizzare la funzione di callback di ogni metodo. In questo modo si ottiene una catena lineare di animazioni che avvengono in simultanea.
Potete visionare l'esempio finale in questa pagina.