Metodas queue

Metodas queue leidžia mums dirbti su eile funkcijų, pririštų prie elemento. Taip pat žiūrėkite metodą clearQueue, kuris leidžia mums pašalinti iš eilės visas funkcijas, kurios nebuvo paleistos.

Sintaksė

Taip mes rodome vykdomų funkcijų eilę, pririštą prie elemento. Galima perduoti neprivalomą parametrą - eilės pavadinimą eilutės pavidalu (pagal nutylėjimą fx - standartinė efektų eilė):

.queue([eilės pavadinimas]);

Mes galime manipuliuoti eile. Vykdoma vieną kartą kiekvienam elementui. Tam galima perduoti antruoju parametru funkcijų masyvą, kuris pakeis esamos eilės turinį:

.queue([eilės pavadinimas], nauja eilė );

Arba antruoju parametru galima perduoti naują callback funkciją pridėti į eilę. Ši funkcija savo ruožtu gauna kitą funkciją kaip parametrą. Tai leidžia automatiškai pašalinti iš eilės sekantį elementą ir judinti eilę:

.queue([eilės pavadinimas], callback funkcija(next) {
	next();
});

Kiekvienas elementas gali turėti vieną ar kelias eilės. Daugelyje aplikacijų naudojama tik viena (fx). Eilės leidžia vykdyti veiksmų seką su elementu asinchroniškai, nepertraukiant programos vykdymo. Iškvietimas queue su callback funkcija leidžia mums įdėti naują funkciją į eilės galą. Callback funkcija vykdoma vieną kartą kiekvienam elementų rinkinyje. Pridedant funkciją naudojant queue, mes turime įsitikinti, kad vėliau bus iškviestas metodas dequeue, kad sekanti funkcija grandinėje pradėtų veikti.

Pavyzdys

Pridėkime pasirinktinę funkciją. Pirma, po paspaudimo ant #animate, mes parodysime raudoną kvadratą, kuris judės į dešinę per 2s, tada naudodami queue pridėsime pasirinktinę funkciją, kuri perdažys kvadratą į žalią, pridėdama klasę newcolor. Kaip matote, tada čia iškviečiamas dequeue, kad pašalintų funkciją iš eilės. Tada mūsų kvadratas judės į kairę pusę sekundės ir bus perdažytas atgal į raudoną - naudodami antrąją pasirinktinę funkciją mes pašaliname klasę newcolor. Pasibaigus animacijai mes suskleidžiame savo kvadratą:

<button id="animate">pradėti</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();
});

Pavyzdys

Pridėkime eilę masyvo pavidalu, kad pašalintume ankstesnę. Paspaudus mygtuką #start mes matysime animaciją iš ankstesnio pavyzdžio. Paspaudus mygtuką #stop mes sustabdysime animaciją pridėdami tuščią masyvą. Vėl paspaudus #start animacija prasidės iš naujo:

<button id="start">pradėti</button>
<button id="stop">sustabdyti</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();
});

Taip pat žiūrėkite

metodas animate,
kuris animuoja elementų savybes
metodas clearQueue,
kuris leidžia pašalinti visus nevykdytus elementus iš funkcijų eilės
metodas dequeue,
kuris leidžia vykdyti sekantį funkciją funkcijų eilėje