Methode queue

De methode queue stelt ons in staat om te werken met de wachtrij functies, gekoppeld aan een element. Zie ook de methode clearQueue, die ons in staat stelt om alle functies uit de wachtrij te verwijderen, die niet zijn gestart.

Syntaxis

Zo tonen we de wachtrij van uit te voeren functies, gekoppeld aan een element. Je kan optioneel de naam van de wachtrij doorgeven als een string (standaard is fx - de standaard wachtrij voor effecten):

.queue([wachtrijnaam]);

We kunnen de wachtrij manipuleren. Wordt één keer uitgevoerd voor elk element. Hiervoor kan je een array van functies als tweede parameter doorgeven, die de inhoud van de huidige wachtrij zullen vervangen:

.queue([wachtrijnaam], nieuweWachtrij );

Of je kan een nieuwe callback-functie als tweede parameter doorgeven om toe te voegen aan de wachtrij. Deze functie ontvangt op zijn beurt een andere functie als parameter. Dit maakt het mogelijk om automatisch het volgende item uit de wachtrij te halen en de wachtrij te laten voortbewegen:

.queue([wachtrijnaam], callback-functie(volgende) {
	volgende();
});

Elk element kan één of meer wachtrijen hebben. In veel toepassingen wordt alleen één (fx) gebruikt. Wachtrijen maken het mogelijk om een reeks acties met een element asynchroon uit te voeren, zonder onderbreking van de programmausvoering. De aanroep queue met een callback-functie stelt ons in staat om een nieuwe functie aan het einde van de wachtrij te plaatsen. De callback-functie wordt één keer uitgevoerd voor elk element in de set. Bij het toevoegen van een functie met queue, moeten we ervoor zorgen dat later de methode dequeue wordt aangeroepen, zodat de volgende functie in de keten gaat werken.

Voorbeeld

Laten we een aangepaste functie toevoegen. Eerst, na het klikken op #animate, tonen we een rood vierkant, dat naar rechts zal bewegen gedurende 2s, vervolgens zullen we met behulp van queue een aangepaste functie toevoegen, die het vierkant groen zal kleuren, door de klasse newcolor toe te voegen. Zoals je ziet, wordt hier vervolgens dequeue aangeroepen, om de functie uit de wachtrij te halen. Vervolgens zal ons vierkant naar links bewegen gedurende een halve seconde en terug rood kleuren - bij behulp van de tweede aangepaste functie verwijderen we de klasse newcolor. Aan het einde van de animatie vouwen we ons vierkant in:

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

Voorbeeld

Laten we een wachtrij toevoegen in de vorm van een array, om de vorige te verwijderen. Bij het klikken op de knop #start zullen we de animatie uit het vorige voorbeeld zien. Bij het klikken op de knop #stop zullen we de animatie stoppen door een lege array toe te voegen. Bij het opnieuw klikken op #start zal de animatie opnieuw beginnen:

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

Zie ook

methode animate,
die eigenschappen van elementen animeert
methode clearQueue,
die het mogelijk maakt om alle niet-uitgevoerde items uit de wachtrij van functies te verwijderen
methode dequeue,
die het mogelijk maakt om de volgende functie in de wachtrij van functies uit te voeren