A queue metódus

A queue metódus lehetővé teszi számunkra, hogy az elemhez kötött függvénysorral dolgozzunk. Lásd még a clearQueue metódust, amely lehetővé teszi számunkra, hogy az összes még nem indított függvényt eltávolítsuk a sorból.

Szintaxis

Így jelenítjük meg az elemhez kötött végrehajtandó függvények sorát. Opcionális paraméterként átadhatjuk a sor nevét karakterláncként (alapértelmezetten fx - a szabványos effektus sor):

.queue([sor neve]);

Manipulálhatjuk a sort. Egyszer fut le minden egyes elemre. Ehhez második paraméterként átadhatunk egy függvénytömböt, amely lecseréli az aktuális sor tartalmát:

.queue([sor neve], új sor );

Vagy második paraméterként átadhatunk egy új callback függvényt a sorhoz adáshoz. Ez a függvény viszont egy másik függvényt kap paraméterként. Ez lehetővé teszi, hogy automatikusan eltávolítsuk a sor következő elemét és továbbítsuk a sort:

.queue([sor neve], callback-függvény(next) {
	next();
});

Minden elemnek lehet egy vagy több sora. Sok alkalmazásban csak egyet használnak (fx). A sorok lehetővé teszik az elemekkel kapcsolatos műveletek sorrendjét aszinkron módon, a program végrehajtásának megszakítása nélkül. A queue hívása callback függvénnyel lehetővé teszi számunkra, hogy egy új függvényt helyezzünk a sor végére. A callback függvény egyszer fut le a halmaz egyes elemeire. A queue használatával történő függvény hozzáadásakor biztosítanunk kell, hogy később meghívjuk a dequeue metódust, annak érdekében, hogy a láncban lévő következő függvény működjön.

Példa

Adjunk hozzá egy egyéni függvényt. Először, a #animate megnyomása után megjelenítünk egy piros négyzetet, amely 2 másodperc alatt jobbra fog mozogni, majd a queue segítségével hozzáadunk egy egyéni függvényt, amely zöldre színezi a négyzetet a newcolor osztály hozzáadásával. Amint láthatod, ezután itt meghívjuk a dequeue-t, hogy eltávolítsuk a függvényt a sorból. Ezután a négyzetünk fél másodperc alatt balra mozog és visszaszíneződik pirosra - a második egyéni függvénnyel eltávolítjuk a newcolor osztályt. Az animáció befejezésekor összecsukjuk a négyzetünket:

<button id="animate">indítás</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élda

Adjunk hozzá egy tömb formájú sort, hogy eltávolítsuk az előzőt. A #start gomb megnyomásakor az előző példa animációját fogjuk látni. A #stop gomb megnyomásakor megállítjuk az animációt egy üres tömb hozzáadásával. A #start ismételt megnyomásakor az animáció újraindul:

<button id="start">indítás</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();
});

Lásd még

a animate metódus,
ami animálja az elemek tulajdonságait
a clearQueue metódus,
ami lehetővé teszi az összes még nem végrehajtott elem eltávolítását a függvénysorból
a dequeue metódus,
ami lehetővé teszi a következő függvény végrehajtását a függvénysorban