Methode queue

Die Methode queue ermöglicht es uns, mit der Warteschlange der an ein Element gebundenen Funktionen zu arbeiten. Siehe auch die Methode clearQueue, die es uns ermöglicht, alle nicht gestarteten Funktionen aus der Warteschlange zu entfernen.

Syntax

Auf diese Weise zeigen wir die Warteschlange der ausgeführten Funktionen, die an das Element gebunden sind. Optional kann der Name der Warteschlange als Zeichenkette übergeben werden (Standardwert ist fx - die Standard-Warteschlange für Effekte):

.queue([Warteschlangenname]);

Wir können die Warteschlange manipulieren. Wird einmal pro Element ausgeführt. Dazu kann als zweiter Parameter ein Array von Funktionen übergeben werden, die den Inhalt der aktuellen Warteschlange ersetzen:

.queue([Warteschlangenname], neueWarteschlange );

Alternativ kann als zweiter Parameter eine neue Callback-Funktion zur Hinzufügung in die Warteschlange übergeben werden. Diese Funktion erhält ihrerseits eine andere Funktion als Parameter. Dies ermöglicht es, das nächste Element automatisch aus der Warteschlange zu entfernen und die Warteschlange weiterzurücken:

.queue([Warteschlangenname], Callback-Funktion(next) {
	next();
});

Jedes Element kann eine oder mehrere Warteschlangen haben. In vielen Anwendungen wird nur eine verwendet (fx). Warteschlangen ermöglichen die Durchführung von Aktionssequenzen mit dem Element asynchron, ohne Unterbrechung der Programmausführung. Der Aufruf von queue mit einer Callback-Funktion ermöglicht es uns, eine neue Funktion am Ende der Warteschlange zu platzieren. Die Callback-Funktion wird einmal für jedes Element im Set ausgeführt. Beim Hinzufügen einer Funktion mit queue müssen wir sicherstellen, dass später die Methode dequeue aufgerufen wird, damit die nächste Funktion in der Kette funktioniert.

Beispiel

Fügen wir eine benutzerdefinierte Funktion hinzu. Zuerst, nach dem Klick auf #animate, zeigen wir ein rotes Quadrat an, das sich für 2s nach rechts bewegt, dann fügen wir mit queue eine benutzerdefinierte Funktion hinzu, die das Quadrat grün einfärbt, indem sie die Klasse newcolor hinzufügt. Wie Sie sehen, wird dann hier dequeue aufgerufen, um die Funktion aus der Warteschlange zu entfernen. Dann bewegt sich unser Quadrat eine halbe Sekunde nach links und wird wieder rot eingefärbt - mit Hilfe der zweiten benutzerdefinierten Funktion entfernen wir die Klasse newcolor. Am Ende der Animation blenden wir unser Quadrat aus:

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

Beispiel

Fügen wir eine Warteschlange in Form eines Arrays hinzu, um die vorherige zu löschen. Beim Klick auf die Schaltfläche #start werden wir die Animation aus dem vorherigen Beispiel sehen. Beim Klick auf die Schaltfläche #stop stoppen wir die Animation, indem wir ein leeres Array hinzufügen. Beim erneuten Klick auf #start startet die Animation von neuem:

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

Siehe auch

die Methode animate,
die Eigenschaften von Elementen animiert
die Methode clearQueue,
die es ermöglicht, alle nicht ausgeführten Elemente aus der Funktionswarteschlange zu entfernen
die Methode dequeue,
die es ermöglicht, die nächste Funktion in der Funktionswarteschlange auszuführen