Metoda queue

Metoda queue nam omogoča delo s čakalno vrsto funkcij, povezanih z elementom. Glejte tudi metodo clearQueue, ki nam omogoča brisanje vseh neizvedenih funkcij iz čakalne vrste.

Sintaksa

Tako prikažemo čakalno vrsto izvajajočih se funkcij, povezanih z elementom. Kot neobvezen parameter lahko podamo ime čakalne vrste v obliki niza (privzeto je fx - standardna vrsta efektov):

.queue([ime čakalne vrste]);

Z čakalno vrsto lahko manipulíramo. Izvede se enkrat za vsak element. Za to lahko podamo kot drugi parameter polje funkcij, ki bodo zamenjale vsebino trenutne čakalne vrste:

.queue([ime čakalne vrste], nova čakalna vrsta );

Lahko pa kot drugi parameter podamo novo callback-funkcijo za dodajanje v čakalno vrsto. Ta funkcija dobi drugo funkcijo kot parameter. To omogoča avtomatično odstranjevanje naslednjega elementa iz čakalne vrste in njeno premikanje:

.queue([ime čakalne vrste], callback-funkcija(next) {
	next();
});

Vsak element ima lahko eno ali več čakalnih vrst. V mnogih aplikacijah se uporablja samo ena (fx). Čakalne vrste omogočajo zaporedje akcij z elementom asinhrono, brez prekinitve izvajanja programa. Klic queue s callback-funkcijo nam omogoča postavitev nove funkcije na konec čakalne vrste. Callback-funkcija se izvede enkrat za vsak element v nizu. Pri dodajanju funkcije z queue, se moramo prepričati, da bo kasneje poklicana metoda dequeue, da bo naslednja funkcija v verigi začela delovati.

Primer

Dodajmo uporabniško funkcijo. Najprej, po kliku na #animate, bomo prikazali rdeči kvadrat, ki se bo premikal v desno v trajanju 2s, nato pa bomo s pomočjo queue dodali uporabniško funkcijo, ki bo kvadrat prebarvala v zeleno z dodajanjem razreda newcolor. Kot vidite, nato je tu poklican dequeue, da odstrani funkcijo iz čakalne vrste. Nato se bo naš kvadrat premaknil v levo pol sekunde in prebarval nazaj v rdečo - s pomočjo druge uporabniške funkcije odstranimo razred newcolor. Ob koncu animacije zvijemo 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

Dodajmo čakalno vrsto v obliki polja, da odstranimo prejšnjo. Ob kliku na gumb #start bomo videli animacijo iz prejšnjega primera. Ob kliku na gumb #stop bomo ustavili animacijo z dodajanjem praznega polja. Ob ponovnem kliku na #start se bo animacija znova začela:

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

Glejte tudi

metoda animate,
ki animira lastnosti elementov
metoda clearQueue,
ki omogoča brisanje vseh neizvedenih elementov iz čakalne vrste funkcij
metoda dequeue,
ki omogoča izvedbo naslednje funkcije v čakalni vrsti funkcij