Metoden queue

Metoden queue giver os mulighed for at arbejde med køen af funktioner knyttet til et element. Se også metoden clearQueue, som giver os mulighed for at fjerne alle funktioner fra køen, som ikke er blevet startet.

Syntaks

Sådan viser vi køen af udførelsesfunktioner, knyttet til et element. Det er muligt at overføre et valgfrit parameter med køens navn i form af en streng (som standard fx - standard kø for effekter):

.queue([kø navn]);

Vi kan manipulere køen. Udføres én gang for hvert element. Til dette kan man overføre som andet parameter et array af funktioner, som erstatter indholdet af den aktuelle kø:

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

Eller man kan som andet parameter overføre en ny callback-funktion for tilføjelse til køen. Denne funktion modtager til gengæld en anden funktion som parameter. Dette giver mulighed for automatisk at fjerne det næste element fra køen og få køen til at bevæge sig:

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

Hvert element kan have én eller flere køer. I mange applikationer bruges kun én (fx). Køer gør det muligt at udføre en sekvens af handlinger med et element asynkront, uden afbrydelse af programudførelsen. Kald af queue med en callback-funktion giver os mulighed for at placere en ny funktion i slutningen af køen. Callback-funktionen udføres én gang for hvert element i sættet. Ved tilføjelse af en funktion med queue, skal vi sikre os, at metoden dequeue bliver kaldt bagefter, for at den næste funktion i kæden kan virke.

Eksempel

Lad os tilføje en brugerdefineret funktion. Først, efter klik på #animate, viser vi en rød firkant, som bevæger sig til højre i løbet af 2s, derefter ved hjælp af queue tilføjer vi en brugerdefineret funktion, som omfarver firkanten til grøn ved at tilføje klassen newcolor. Som du kan se, bliver dequeue herefter kaldt for at fjerne funktionen fra køen. Derefter vil vores firkant bevæge sig til venstre i et halvt sekund og omfarves tilbage til rød - ved hjælp af den anden brugerdefinerede funktion fjerner vi klassen newcolor. Ved afslutningen af animationen skjuler vi vores 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

Lad os tilføje en kø i form af et array for at fjerne den forrige. Ved klik på knappen #start vil vi se animationen fra det foregående eksempel. Ved klik på knappen #stop stopper vi animationen ved at tilføje et tomt array. Ved gentaget klik på #start vil animationen starte forfra:

<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 elementers egenskaber
metoden clearQueue,
som giver mulighed for at slette alle ikke-udførte elementer fra køen af funktioner
metoden dequeue,
som giver mulighed for at udføre den næste funktion i køen af funktioner