Methode clearQueue

De methode clearQueue stelt ons in staat om alle functies die nog niet zijn gestart uit de wachtrij te verwijderen.

Syntaxis

Zo kunnen we de wachtrij van functies leegmaken. We kunnen optioneel de naam van de wachtrij als string doorgeven (standaard is dit fx - de standaard effectenwachtrij). Als er geen parameters worden doorgegeven, worden alle resterende functies uit de fx wachtrij verwijderd:

.clearQueue([wachtrijnaam]);

Deze methode is vergelijkbaar met de methode stop. Maar, waar de laatste alleen met animatie kan werken, stelt clearQueue ons in staat om met elke jQuery-wachtrij te werken die was toegevoegd met de methode queue.

Voorbeeld

Laten we bij het klikken op de knop #start de animatie starten. Bij het klikken op de knop #stop stoppen we de animatie en maken we de wachtrij leeg met behulp van de methode clearQueue. Bij het opnieuw klikken op #start start de animatie opnieuw:

<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() {

	let myDiv = $('div');
	
	myDiv.show('slow');
	
	myDiv.animate({
		left: '+=200'
	}, 5000);
	
	myDiv.queue(function() {
		let that = $(this);
		that.addClass('newcolor');
		that.dequeue();
	});
	
	myDiv.animate({
		left: '-=200'
	}, 1500);
	
	myDiv.queue(function() {
		let that = $(this);
		that.removeClass('newcolor');
		that.dequeue();
	});
	
	myDiv.slideUp();
});
	
$('#stop').click(function() {
	let myDiv = $('div');
	myDiv.clearQueue();
	myDiv.stop();
});

Zie ook

methode queue,
die het mogelijk maakt om de wachtrij van functies te tonen en te wijzigen
methode dequeue,
die het mogelijk maakt om de volgende functie in de wachtrij van functies uit te voeren
methode stop,
die het mogelijk maakt om een gestarte animatie te stoppen
methode animate,
die eigenschappen van elementen animeert