Metodo queue

Il metodo queue ci permette di lavorare con la coda di funzioni associate a un elemento. Vedi anche il metodo clearQueue, che ci permette di rimuovere dalla coda tutte le funzioni che non sono state eseguite.

Sintassi

In questo modo mostriamo la coda di funzioni in esecuzione, associate all'elemento. Possiamo passare come parametro opzionale il nome della coda in forma di stringa (di default fx - la coda standard degli effetti):

.queue([nome coda]);

Possiamo manipolare la coda. Viene eseguito una volta per ogni elemento. Per fare questo possiamo passare come secondo parametro un array di funzioni, che sostituirà il contenuto della coda corrente:

.queue([nome coda], nuova coda );

Oppure possiamo passare come secondo parametro una nuova funzione di callback per aggiungerla alla coda. Questa funzione a sua volta riceve un'altra funzione come parametro. Questo permette di rimuovere automaticamente dalla coda l'elemento successivo e di far avanzare la coda:

.queue([nome coda], funzione di callback(next) {
	next();
});

Ogni elemento può avere una o più code. In molte applicazioni viene utilizzata solo una (fx). Le code permettono di realizzare una sequenza di azioni con l'elemento in modo asincrono, senza interrompere l'esecuzione del programma. La chiamata queue con una funzione di callback ci permette di inserire una nuova funzione in fondo alla coda. La funzione di callback viene eseguita una volta per ogni elemento nell'insieme. Quando aggiungiamo una funzione con queue, dobbiamo assicurarci che in seguito venga chiamato il metodo dequeue, in modo che la funzione successiva nella catena si attivi.

Esempio

Aggiungiamo una funzione personalizzata. Prima, dopo aver cliccato su #animate, mostreremo un quadrato rosso, che si sposterà a destra per 2s, poi tramite queue aggiungeremo una funzione personalizzata, che colorerà il quadrato in verde, aggiungendo la classe newcolor. Come puoi vedere, qui viene poi chiamato dequeue, per rimuovere la funzione dalla coda. Poi il nostro quadrato si sposterà a sinistra per mezzo secondo e si colorerà di nuovo in rosso - tramite una seconda funzione personalizzata rimuoviamo la classe newcolor. Alla fine dell'animazione chiudiamo il nostro quadrato:

<button id="animate">start</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}

div.newcolor {
	background: green;
}

$('#animate').click(function() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 2000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});

Esempio

Aggiungiamo una coda sotto forma di array, per eliminare quella precedente. Cliccando sul pulsante #start vedremo l'animazione dell'esempio precedente. Cliccando sul pulsante #stop fermeremo l'animazione aggiungendo un array vuoto. Cliccando di nuovo su #start l'animazione ricomincerà da capo:

<button id="start">start</button>
<button id="stop">stop</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}
div.newcolor {
	background: green;
}

$('#start').click(function() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 5000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 1500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});
	
$('#stop').click(function() {
	$('div').queue('fx', []).stop();
});

Vedi anche

metodo animate,
che anima le proprietà degli elementi
metodo clearQueue,
che permette di rimuovere tutti gli elementi non eseguiti dalla coda delle funzioni
metodo dequeue,
che permette di eseguire la funzione successiva nella coda delle funzioni