Die stop-Methode

Die Methode stop ermöglicht es uns, eine laufende Animation sofort anzuhalten. Die Animation wird mit der nächsten Funktion fortgesetzt, ohne die vorherige abzuschließen.

Syntax

So halten wir eine laufende Animation an. Es können zwei optionale Parameter übergeben werden, die boolesche Werte annehmen. Wenn der erste Parameter auf true gesetzt wird, werden die verbleibenden Funktionen in der Animations-Warteschlange gelöscht und niemals ausgeführt. Wenn der zweite Parameter auf true gesetzt wird, nehmen die CSS-Eigenschaften des Elements beim Stoppen der Animation sofort ihre Endwerte an (d.h., wenn das Ziel war, das Element sanft auszublenden, wird es sofort ausgeblendet):

.stop([clearQueue], [jumpToEnd]);

Es kann auch ein optionaler Parameter übergeben werden, der den Namen der Warteschlange angibt:

.stop([Warteschlangenname], [clearQueue],[jumpToEnd]);

Animationen können global deaktiviert werden, indem die Einstellung jQuery.fx.off = true verwendet wird, was die Dauer auf 0 setzt.

Beispiel

Lassen Sie uns den Button #toggle so einrichten, dass bei jedem Klick unser Rechteck sich ein- und ausklappt, und zwar mit der Methode slideToggle. Klicken Sie auf den Button, ohne das Ende der Animation abzuwarten - die nächste Stufe wird gestartet, ohne auf den Abschluss der vorherigen zu warten, dank der Methode stop:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	background-color: green;
	border: 1px solid black;
	width: 200px;
	height: 100px;
	margin: 10px;
}

$('#toggle').on('click', function() {
	$('#test').stop().slideToggle(1500);
});

Siehe auch

die Methode clearQueue,
die es ermöglicht, alle nicht ausgeführten Elemente aus der Funktions-Warteschlange zu entfernen
die Eigenschaft jQuery.fx.off,
die es ermöglicht, Animationen global zu deaktivieren