Metod queue

Metod queue nam omogućava da radimo sa redom funkcija vezanih za element. Pogledajte takođe metod clearQueue, koji nam omogućava da uklonimo iz reda sve funkcije koje nisu pokrenute.

Sintaksa

Ovako prikazujemo red funkcija koje se izvršavaju, vezanih za element. Možemo proslediti opcioni parametar naziv reda u vidu stringa (podrazumevano fx - standardni red efekata):

.queue([ime reda]);

Možemo manipulisati redom. Izvršava se jedan put za svaki element. Za to možemo proslediti drugim parametrom niz funkcija, koji će zameniti sadržaj trenutnog reda:

.queue([ime reda], novi red );

A možemo drugim parametrom proslediti novu callback-funkciju za dodavanje u red. Ova funkcija zauzvrat dobija drugu funkciju kao parametar. Ovo omogućava automatsko uklanjanje iz reda sledećeg elementa i pomeranje reda:

.queue([ime reda], callback-funkcija(next) {
	next();
});

Svaki element može imati jedan ili više redova. U mnogim aplikacijama se koristi samo jedan (fx). Redovi omogućavaju izvršavanje sekvence akcija sa elementom asinhrono, bez prekida izvršavanja programa. Poziv queue sa callback-funkcijom nam omogućava da smestimo novu funkciju na kraj reda. Callback-funkcija se izvršava jedan put za svaki element u skupu. Prilikom dodavanja funkcije pomoću queue, mi moramo biti sigurni da će kasnije biti pozvan metod dequeue, kako bi sledeća funkcija u lancu počela da radi.

Primer

Hajde da dodamo prilagođenu funkciju. Prvo, nakon klika na #animate, prikazaćemo crveni kvadrat, koji će se kretati udesno tokom 2s, zatim pomoću queue dodati prilagođenu funkciju, koja će prebojati kvadrat u zeleno, dodajući klasu newcolor. Kao što vidite, zatim se ovde poziva dequeue, da bi se uklonila funkcija iz reda. Zatim će se naš kvadrat kretati ulevo pola sekunde i prebojaće se nazad u crveno - pomoću druge prilagođene funkcije uklanjamo klasu newcolor. Po završetku animacije mi sklupčamo naš kvadrat:

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

Primer

Hajde da dodamo red u vidu niza, da bismo uklonili prethodni. Pri kliku na dugme #start videćemo animaciju iz prethodnog primera. Pri kliku na dugme #stop zaustavićemo animaciju putem dodavanja praznog niza. Pri ponovnom kliku na #start animacija će počinjati ispočetka:

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

Pogledajte takođe

metod animate,
koji animira svojstva elemenata
metod clearQueue,
koji omogućava brisanje svih neizvršenih elemenata iz reda funkcija
metod dequeue,
koji omogućava izvršenje sledeće funkcije u redu funkcija