Metoda queue

Metoda queue ne permite să lucrăm cu coada de funcții asociate unui element. Vedeți și metoda clearQueue, care ne permite să eliminăm din coadă toate funcțiile care nu au fost executate.

Sintaxă

Așa afișăm coada de funcții executabile, asociate elementului. Se poate transmite un parametru opțional reprezentând numele cozii sub formă de șir de caractere (implicit fx - coada standard de efecte):

.queue([numele cozii]);

Putem manipula coada. Se execută o dată pentru fiecare element. Pentru aceasta se poate transmite al doilea parametru ca un array de funcții, care vor înlocui conținutul curent al cozii:

.queue([numele cozii], coada_nouă );

Sau se poate transmite al doilea parametru ca o nouă funcție callback pentru a fi adăugată în coadă. Această funcție la rândul ei primește o altă funcție ca parametru. Acest lucru permite scoaterea automată a următorului element din coadă și deplasarea cozii:

.queue([numele cozii], funcția_callback(next) {
	next();
});

Fiecare element poate avea una sau mai multe cozi. În multe aplicații se folosește doar una (fx). Cozile permit efectuarea secvenței de acțiuni asupra elementului în mod asincron, fără întreruperea execuției programului. Apelul queue cu o funcție callback ne permite să plasăm o nouă funcție la sfârșitul cozii. Funcția callback se execută o dată pentru fiecare element din set. La adăugarea unei funcții cu queue, trebuie să ne asigurăm că ulterior va fi apelată metoda dequeue, pentru ca următoarea funcție din lanț să fie executată.

Exemplu

Să adăugăm o funcție personalizată. Mai întâi, după click pe #animate, vom afișa un pătrat roșu, care se va deplasa la dreapta timp de 2s, apoi cu ajutorul queue vom adăuga o funcție personalizată, care va recolora pătratul în verde, adăugând clasa newcolor. După cum vedeți, aici este apoi apelat dequeue, pentru a scoate funcția din coadă. Apoi pătratul nostru se va deplasa la stânga jumătate de secundă și se va recolor înapoi în roșu - cu ajutorul celei de-a doua funcții personalizate înlăturăm clasa newcolor. La finalul animației restrângem pătratul nostru:

<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();
});

Exemplu

Să adăugăm o coadă sub formă de array, pentru a șterge cea precedentă. La click pe butonul #start vom vedea animația din exemplul anterior. La click pe butonul #stop vom opri animația prin adăugarea unui array gol. La un nou click pe #start animația va începe de la început:

<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();
});

Vedeți și

metoda animate,
care animează proprietățile elementelor
metoda clearQueue,
care permite eliminarea tuturor elementelor neefectuate din coada de funcții
metoda dequeue,
care permite executarea următoarei funcții din coada de funcții