Metode queue

Die metode queue laat ons toe om met die tou van funksies wat aan 'n element gekoppel is, te werk. Sien ook die metode clearQueue, wat ons toelaat om alle funksies wat nog nie uitgevoer is nie uit die tou te verwyder.

Sintaksis

So wys ons die tou van funksies wat uitgevoer word, gekoppel aan die element. 'n Opsionele parameter kan oorgedra word wat die naam van die tou is as 'n string (standaard is dit fx - die standaard effek-tou):

.queue([tou naam]);

Ons kan die tou manipuleer. Dit word een keer vir elke element uitgevoer. Om dit te doen, kan 'n tweede parameter oorgedra word wat 'n skikkings van funksies is, wat die inhoud van die huidige tou sal vervang:

.queue([tou naam], nuwe tou );

Of 'n tweede parameter kan oorgedra word wat 'n nuwe callback-funksie is om by die tou te voeg. Hierdie funksie ontvang op sy beurt 'n ander funksie as 'n parameter. Dit laat toe om die volgende item outomaties uit die tou te verwyder en die tou te skuif:

.queue([tou naam], callback-funksie(next) {
	next();
});

Elke element kan een of meer toue hê. In baie toepassings word slegs een (fx) gebruik. Toe laat toe om volgorde van aksies met 'n element asinkroon uit te voer, sonder om die program uitvoering te onderbreek. Die oproep van queue met 'n callback-funksie laat ons toe om 'n nuwe funksie aan die einde van die tou te plaas. Die callback-funksie word een keer vir elke element in die stel uitgevoer. Wanneer 'n funksie met queue bygevoeg word, moet ons seker maak dat die metode dequeue later aangeroep sal word, vir die volgende funksie in die ketting om te begin werk.

Voorbeeld

Kom ons voeg 'n pasgemaakte funksie by. Eerstens, na die klik op #animate, sal ons 'n rooi vierkant wys, wat na regs sal beweeg vir 2s, dan sal ons met queue 'n pasgemaakte funksie byvoeg wat die vierkant groen sal maak deur die klas newcolor by te voeg. Soos jy kan sien, word dequeue dan hier aangeroep om die funksie uit die tou te verwyder. Dan sal ons vierkant 'n halwe sekonde na links beweeg en terug na rooi verander - met die tweede pasgemaakte funksie verwyder ons die klas newcolor. Aan die einde van die animasie sluit ons ons vierkant toe:

<button id="animate">begin</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('stadig')
		.animate({left: '+=200'}, 2000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});

Voorbeeld

Kom ons voeg 'n tou as 'n skikking by, om die vorige een te verwyder. As daar op die knoppie #start gedruk word, sal ons die animasie van die vorige voorbeeld sien. As daar op die knoppie #stop gedruk word, sal ons die animasie stop deur 'n leë skikking by te voeg. As daar weer op #start gedruk word, sal die animasie weer van voor af begin:

<button id="start">begin</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('stadig')
		.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();
});

Sien ook

die metode animate,
wat eienskappe van elemente animeer
die metode clearQueue,
wat toelaat om alle onvoltooide items uit die funksie-tou te verwyder
die metode dequeue,
wat toelaat om die volgende funksie in die funksie-tou uit te voer