Metode queue

Metode queue ļauj mums strādāt ar elementam piesaistīto funkciju rindu. Skatiet arī metodi clearQueue, kas ļauj mums noņemt no rindas visas funkcijas, kuras vēl nav palaistas.

Sintakse

Tādā veidā mēs parādām elementam piesaistīto izpildāmo funkciju rindu. Var padot neobligātu parametru - rindas nosaukumu virknē (pēc noklusējuma fx - standarta efektu rinda):

.queue([rindas nosaukums]);

Mēs varam manipulēt ar rindu. Izpildās vienu reizi katram elementam. Lai to izdarītu, var padot otro parametru kā funkciju masīvu, kas aizvietos pašreizējās rindas saturu:

.queue([rindas nosaukums], jaunā rinda );

Var arī otro parametru padot jaunu callback funkciju, lai to pievienotu rindai. Šī funkcija savukārt saņem citu funkciju kā parametru. Tas ļauj automātiski noņemt no rindas nākamo elementu un pārvietot rindu:

.queue([rindas nosaukums], callback funkcija(next) {
	next();
});

Katram elementam var būt viena vai vairākas rindas. Daudzās lietojumprogrammās tiek izmantota tikai viena (fx). Rindas ļauj veikt darbību secību ar elementu asinhroni, neapturot programmas izpildi. Izsaukums queue ar callback funkciju ļauj mums ievietot jaunu funkciju rindas beigās. Callback funkcija tiek izpildīta vienu reizi katram elementam kopā. Pievienojot funkciju, izmantojot queue, mums jāpārliecinās, ka vēlāk tiks izsaukta metode dequeue, lai nākamā funkcija ķēdē darbotos.

Piemērs

Pievienosim pielāgotu funkciju. Vispirms, pēc noklikšķināšanas uz #animate, mēs parādīsim sarkano kvadrātu, kurš pārvietosies pa labi 2s garumā, tad, izmantojot queue, mēs pievienosim pielāgotu funkciju, kas pārkrāsos kvadrātu zaļā krāsā, pievienojot klasi newcolor. Kā redzat, tad šeit tiek izsaukts dequeue, lai noņemtu funkciju no rindas. Tad mūsu kvadrāts pārvietosies pa kreisi pustrešās sekundes un atgriezīsies sarkanā krāsā - ar otras pielāgotās funkcijas palīdzību mēs noņemam klasi newcolor. Pēc animācijas beigām mēs sakļaujam mūsu kvadrātu:

<button id="animate">sākt</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();
});

Piemērs

Pievienosim rindu masīva veidā, lai noņemtu iepriekšējo. Noklikšķinot uz pogas #start mēs redzēsim animāciju no iepriekšējā piemēra. Noklikšķinot uz pogas #stop mēs apstādināsim animāciju, pievienojot tukšu masīvu. Atkārtoti noklikšķinot uz #start animācija sāksies no jauna:

<button id="start">sākt</button>
<button id="stop">apturēt</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();
});

Skatiet arī

metode animate,
kas animē elementu īpašības
metode clearQueue,
kas ļauj noņemt visas neizpildītās funkcijas no funkciju rindas
metode dequeue,
kas ļauj izpildīt nākamo funkciju funkciju rindā