Metoden queue

Metoden queue lar oss arbeide med køen av funksjoner knyttet til et element. Se også metoden clearQueue, som lar oss fjerne alle funksjoner fra køen som ikke har blitt startet.

Syntaks

Slik viser vi køen av utførende funksjoner, knyttet til elementet. Du kan sende et valgfritt parameter med køens navn i form av en streng (standard er fx - standard effektkø):

.queue([kønavn]);

Vi kan manipulere køen. Utføres én gang for hvert element. For dette kan du sende et andre parameter med en array av funksjoner, som vil erstatte innholdet i den nåværende køen:

.queue([kønavn], ny kø );

Eller du kan sende en ny callback-funksjon som andre parameter for å legge til i køen. Denne funksjonen mottar i sin tur en annen funksjon som parameter. Dette lar deg automatisk fjerne neste element fra køen og fremdrive køen:

.queue([kønavn], callback-funksjon(next) {
	next();
});

Hvert element kan ha én eller flere køer. I mange applikasjoner brukes bare én (fx). Køer lar oss utføre sekvens av handlinger med et element asynkront, uten avbrudd i programkjøringen. Kall til queue med en callback-funksjon lar oss plassere en ny funksjon på slutten av køen. Callback-funksjonen utføres én gang for hvert element i settet. Ved tillegg av funksjon med queue, må vi sikre at metoden dequeue blir kalt etterpå, for at neste funksjon i kjeden skal virke.

Eksempel

La oss legge til en egendefinert funksjon. Først, etter klikk på #animate, vil vi vise en rød firkant, som vil bevege seg til høyre i løpet av 2s, deretter ved hjelp av queue legger vi til en egendefinert funksjon, som vil endre firkantens farge til grønn, ved å legge til klassen newcolor. Som du ser, kalles deretter dequeue for å fjerne funksjonen fra køen. Deretter vil vår firkant bevege seg til venstre i et halvt sekund og skifte farge tilbake til rød - ved hjelp av den andre egendefinerte funksjonen fjerner vi klassen newcolor. Ved animasjonens slutt kollapser vi vår firkant:

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

Eksempel

La oss legge til en kø i form av en array for å fjerne den forrige. Ved klikk på knappen #start vil vi se animasjonen fra forrige eksempel. Ved klikk på knappen #stop vil vi stoppe animasjonen ved å legge til en tom array. Ved gjentatt klikk på #start vil animasjonen starte på nytt:

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

Se også

metoden animate,
som animerer egenskaper til elementer
metoden clearQueue,
som lar deg fjerne alle uutførte elementer fra køen av funksjoner
metoden dequeue,
som lar deg utføre neste funksjon i køen av funksjoner