jQuery: animazioni in sequenza o sequenziali

Le animazioni jQuery possono essere create in sequenza utilizzando una semplice tecnica che vedremo di seguito. Il principio alla base di queste animazioni è l'attesa o il ritardo creato tra un'animazione e l'altra in un set di elementi. Vediamone insieme i dettagli.

Abbiamo questo set di elementi:

<div id="wrapper">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

Ecco il codice jQuery:

$(function() {
    
    var time = 0;
    
    $('div.box', document.getElementById('wrapper')).each(function() {
        
        $(this).delay(time).animate({opacity: 0.5}, 1000);
        
        time += 1000;
        
    });
});

Usando un indice incrementale e il metodo delay() (che crea un ritardo tra un'animazione e l'altra) le animazioni verranno eseguite in sequenza. Potete visionare l'esempio finale in questa pagina.