Metoda queue

Metoda queue nám umožňuje pracovat s frontou funkcí připojených k elementu. Viz také metodu clearQueue, která nám umožňuje odstranit z fronty všechny funkce, které nebyly spuštěny.

Syntaxe

Tímto způsobem zobrazíme frontu prováděných funkcí, připojených k elementu. Lze předat volitelným parametrem název fronty ve formě řetězce (výchozí je fx - standardní fronta efektů):

.queue([název fronty]);

Můžeme manipulovat s frontou. Provede se jednou pro každý element. K tomu lze předat druhým parametrem pole funkcí, které nahradí obsah aktuální fronty:

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

Nebo lze druhým parametrem předat novou callback funkci pro přidání do fronty. Tato funkce zase získává další funkci jako parametr. To umožňuje automaticky odstranit z fronty další prvek a posunout frontu:

.queue([název fronty], callback funkce(next) {
	next();
});

Každý element může mít jednu nebo více front. V mnoha aplikacích se používá pouze jedna (fx). Fronty umožňují provádět posloupnost akcí s elementem asynchronně, bez přerušení provádění programu. Volání queue s callback funkcí nám umožňuje umístit novou funkci na konec fronty. Callback funkce se provede jednou pro každý element v sadě. Při přidávání funkce pomocí queue musíme zajistit, že poté bude volána metoda dequeue, aby se spustila další funkce v řetězci.

Příklad

Přidejme vlastní funkci. Nejprve, po kliknutí na #animate zobrazíme červený čtverec, který se bude pohybovat doprava po dobu 2s, poté pomocí queue přidáme vlastní funkci, která přebarví čtverec na zelenou, přidáním třídy newcolor. Jak vidíte, poté je zde volána dequeue, aby se odstranila funkce z fronty. Poté se náš čtverec bude pohybovat doleva půl sekundy a přebarví se zpět na červenou - pomocí druhé vlastní funkce odstraníme třídu newcolor. Po dokončení animace sbalíme náš čtverec:

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

Příklad

Přidejme frontu ve formě pole, abychom odstranili předchozí. Po kliknutí na tlačítko #start uvidíme animaci z předchozího příkladu. Po kliknutí na tlačítko #stop zastavíme animaci přidáním prázdného pole. Po opětovném kliknutí na #start se animace začne znovu:

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

Viz také

metoda animate,
která animuje vlastnosti elementů
metoda clearQueue,
která umožňuje odstranit všechny neprovedené prvky z fronty funkcí
metoda dequeue,
která umožňuje provést další funkci ve frontě funkcí