Concatenare le animazioni in jQuery

  • jQuery
  • Gabriele Romanato

La concatenazione di animazioni in jQuery avviene su gruppi di elementi. Funziona così: animiamo il primo elemento, lasciamo trascorrere un intervallo di tempo e così via per i successivi. Ci sono due modi per ottenere questo risultato: possiamo utilizzare la funzione che viene eseguita alla fine di un'animazione per creare l'animazione successiva o possiamo utilizzare la coda di animazioni con i metodi queue() e dequeue(). Vediamo insieme i dettagli.

Abbiamo questo gruppo di elementi:


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

Qui gli elementi sono dello stesso tipo, ma volendo possiamo usare la stessa classe CSS per animare elementi differenti. Il primo metodo è il seguente:


$(function() {

	$('div.box:first').animate({
		opacity: 0.5
	}, 1000, function() {
	
		$(this).next().animate({
			opacity: 0.5
		}, 1000, function() {
		
			$(this).next().animate({
				opacity: 0.5
			}, 1000);
		
		});
	
	});

});

Come si può notare abbiamo usato la funzione del metodo animate() per animare l'elemento successivo a quello corrente. La soluzione funziona, ma il nostro codice tende a diventare troppo prolisso.

La seconda soluzione, invece, crea una coda di animazioni con il metodo queue(). Il problema con questo metodo è che le animazioni partono simultaneamente, quindi dobbiamo utilizzare il metodo delay() con un timer incrementale per ovviare al problema:


$(function() {

	var timer = 0;
    $('div.box').each(function() {
        var $box = $(this);
        $box.queue('opacity', function(next) {
            $box.delay(timer).animate({
                opacity: 0.5
            }, 1000, next);
        });
        $box.dequeue('opacity');
        timer += 1000;
    });
});

Il timer viene incrementato di 1000 millisecondi ad ogni iterazione del metodo each(). Il metodo queue() accetta due parametri: il primo è il nome dato alla coda di animazioni e il secondo è la funzione da chiamare ogni volta. Il parametro next serve a mettere in coda l'iterazione sull'elemento successivo. Appena la coda corrente termina il suo ciclo, dobbiamo liberare memoria utilizzando il metodo .dequeue() che accetta come parametro il nome della coda che abbiamo definito.

Potete visionare l'esempio finale in questa pagina.

Torna su