jQuery: usare il metodo queue() per gestire la coda delle animazioni

jQuery dispone del metodo .queue() con cui possiamo creare una coda di animazioni (da cui il nome del metodo). Vediamo insieme alcuni esempi pratici di questo metodo.

Solitamente le animazioni jQuery avvengono in modo simultaneo essendo di fatto eseguite in parallelo. Con il metodo .queue() possiamo invece fare in modo che le animazioni vengano eseguite in modo sequenziale.

Consideriamo ad esempio questa animazione:

$('#test').animate({
  left: 100
},600).animate({
  opacity: 0.5
}, 600);

Le due proprietà vengono modificate simultaneamente. Invece creando una coda di animazioni ciò avviene in sequenza:

$('#test').animate({
  left: 100
}, 600).queue(function(next) {
  $('#test').animate({
  opacity: 0.5
  });
  next();
});

Il metodo .queue() accetta come primo parametro opzionale una stringa che indica il nome dato alla coda di animazioni. Quando si utilizza questo primo parametro è necessario utilizzare anche il metodo .dequeue() per fare in modo che la coda di animazioni venga eseguita:

$('#test').fadeOut(600).
queue('hiding', function(next) {
  $('#test').fadeIn(600);
  next();
}).dequeue('hiding');

Una caratteristica interessante di questo metodo è che ci permette di eseguire un'azione di callback quando l'animazione è terminata:

$('#test').animate({
  left: 100
}, 600).queue(function(next) {
  alert('Done');
  next();
});