Metoden queue

Metoden queue gör det möjligt för oss att arbeta med kön av funktioner som är kopplade till ett element. Se även metoden clearQueue, som gör det möjligt för oss att ta bort alla funktioner från kön som inte har körts.

Syntax

Så här visar vi kön av funktioner som körs, som är kopplade till ett element. Du kan skicka ett valfritt parameternamn för kön i form av en sträng (standard är fx - standardkön för effekter):

.queue([könamn]);

Vi kan manipulera kön. Utförs en gång för varje element. För detta kan du skicka en array med funktioner som den andra parametern, vilket kommer att ersätta innehållet i den aktuella kön:

.queue([könamn], ny kö );

Eller så kan du skicka en ny callback-funktion som den andra parametern för att lägga till i kön. Denna funktion får i sin tur en annan funktion som parameter. Detta gör det möjligt att automatiskt ta bort nästa element från kön och flytta kön framåt:

.queue([könamn], callback-funktion(next) {
	next();
});

Varje element kan ha en eller flera köer. I många applikationer används bara en (fx). Köer gör det möjligt att utföra sekvenser av åtgärder på ett element asynkront, utan att avbryta programkörningen. Anropet queue med en callback-funktion gör det möjligt för oss att placera en ny funktion i slutet av kön. Callback-funktionen utförs en gång för varje element i uppsättningen. När du lägger till en funktion med queue måste vi se till att metoden dequeue sedan anropas, för att nästa funktion i kedjan ska börja fungera.

Exempel

Låt oss lägga till en anpassad funktion. Först, efter att ha klickat på #animate, kommer vi att visa en röd kvadrat, som kommer att röra sig åt höger under 2s, sedan med hjälp av queue lägger vi till en anpassad funktion som kommer att ändra färg på kvadraten till grön, genom att lägga till klassen newcolor. Som du ser, anropas sedan dequeue här för att ta bort funktionen från kön. Sedan kommer vår kvadrat att röra sig åt vänster i en halv sekund och ändras tillbaka till röd - med hjälp av den andra anpassade funktionen tar vi bort klassen newcolor. När animationen är klar döljer vi vår kvadrat:

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

Exempel

Låt oss lägga till en kö i form av en array för att ta bort den föregående. När du klickar på knappen #start kommer vi att se animationen från föregående exempel. När du klickar på knappen #stop kommer vi att stoppa animationen genom att lägga till en tom array. När du klickar igen på #start kommer animationen att börja om:

<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 även

metoden animate,
som animerar elementens egenskaper
metoden clearQueue,
som gör det möjligt att ta bort alla oavslutade element från kön av funktioner
metoden dequeue,
som gör det möjligt att köra nästa funktion i kön av funktioner