Metóda queue

Metóda queue nám umožňuje pracovať s frontou funkcií priradených k prvku. Pozrite si tiež metódu clearQueue, ktorá nám umožňuje odstrániť z fronty všetky funkcie, ktoré neboli spustené.

Syntax

Takto zobrazujeme frontu vykonávaných funkcií, priradených k prvku. Je možné odovzdať voliteľný parameter názov fronty v tvare reťazca (štandardne fx - štandardná fronta efektov):

.queue([názov fronty]);

Môžeme manipulovať s frontou. Vykoná sa raz pre každý prvok. Na to je možné odovzdať druhým parametrom pole funkcií, ktoré nahradia obsah aktuálnej fronty:

.queue([názov fronty], nová fronta );

Alebo druhým parametrom odovzdať novú callback-funkciu pre pridanie do fronty. Táto funkcia naopak dostáva inú funkciu ako parameter. To umožňuje automaticky odstraňovať z fronty ďalší prvok a posúvať frontu:

.queue([názov fronty], callback-funkcia(next) {
	next();
});

Každý prvok môže mať jednu alebo viacero front. V mnohých aplikáciách sa používa iba jedna (fx). Fronty umožňujú vykonávať postupnosť akcií s prvkom asynchrónne, bez prerušenia vykonávania programu. Volanie queue s callback-funkciou nám umožňuje umiestniť novú funkciu na koniec fronty. Callback-funkcia sa vykoná raz pre každý prvok v množine. Pri pridávaní funkcie pomocou queue, musíme sa uistiť, že potom bude zavolaná metóda dequeue, aby nasledujúca funkcia v reťazci začala fungovať.

Príklad

Pridajme užívateľskú funkciu. Najprv, po kliknutí na #animate, zobrazíme červený štvorec, ktorý sa bude pohybovať doprava počas 2s, potom pomocou queue pridáme užívateľskú funkciu, ktorá prefarbí štvorec na zelený, pridaním triedy newcolor. Ako vidíte, potom sa tu volá dequeue, aby sa odstránila funkcia z fronty. Potom sa náš štvorec bude pohybovať doľava pol sekundy a prefarbí späť na červený - pomocou druhej užívateľskej funkcie odstránime triedu newcolor. Po skončení animácie zbalíme náš štvorec:

<button id="animate">štart</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();
});

Príklad

Pridajme frontu v tvare poľa, aby sme odstránili predchádzajúcu. Pri kliknutí na tlačidlo #start budeme vidieť animáciu z predchádzajúceho príkladu. Pri kliknutí na tlačidlo #stop zastavíme animáciu pridaním prázdneho poľa. Pri opätovnom kliknutí na #start sa animácia začne odznova:

<button id="start">štart</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();
});

Pozrite si aj

metóda animate,
ktorá animuje vlastnosti prvkov
metóda clearQueue,
ktorá umožňuje odstrániť všetky nevykonané prvky z fronty funkcií
metóda dequeue,
ktorá umožňuje vykonať ďalšiu funkciu vo fronte funkcií