Methode animate

Die Methode animate ermöglicht es, Animationseffekte für verschiedene CSS-Eigenschaften zu erstellen. Der einzige obligatorische Parameter ist ein Objekt mit CSS-Eigenschaften, ähnlich dem, das wir an die Methode css übergeben. Viele Eigenschaften, die nicht-numerische Werte oder mehrere Werte haben, können nicht mit der Grundfunktionalität von jQuery animiert werden (z.B. background-color). Auch werden nicht immer abgekürzte Namen von CSS-Eigenschaften unterstützt, z.B. font - stattdessen muss fontSize oder font-size verwendet werden. Vor Werten kann '+=' oder '-=' gesetzt werden, in diesem Fall wird der angegebene Wert zum aktuellen Wert der Eigenschaft addiert oder subtrahiert. Statt numerischer Werte können auch show, hide oder toggle gesetzt werden. Alle jQuery-Effekte, einschließlich animate, können global deaktiviert werden, indem die Einstellung jQuery.fx.off = true verwendet wird, was den Wert der Dauer auf 0 setzt.

Syntax

Der erste Parameter der Animation ist ein Objekt mit CSS-Eigenschaften und ihren Werten im Format Schlüssel: Wert, die wir animieren möchten. Die restlichen Parameter gelten als optional. Der zweite Parameter bestimmt die Dauer der Animation in Millisekunden, standardmäßig 400ms. Der dritte Parameter ist die Übergangsfunktion für den Übergang (standardmäßig ist dies swing), und der vierte - eine Callback-Funktion, die nach Abschluss der Animation ausgeführt wird:

.animate(Eigenschaften, [Dauer ], [Übergangsfunktion ], [Callback-Funktion ]);

Die Zeit kann nicht nur in Millisekunden angegeben werden, sondern auch mit den Schlüsselwörtern slow (600ms) und fast (200ms), je größer der Wert, desto langsamer die Animation. Dem Methode können verschiedene Optionen als zweiter Parameter übergeben werden, in Form eines JavaScript-Objekts, das Paare Schlüssel: Wert enthält:

.animate(Eigenschaften, Optionen);

Lassen Sie uns zum Beispiel für die CSS-Eigenschaften width und height den Wert toggle setzen. Die Dauer auf 5000ms, wir übergeben die Übergangsfunktionen als Objekt, für die Breite wird es eine lineare Funktion sein, und für die Höhe - easeOutBounce, außerdem wird nach Abschluss der Animation einmalig eine Funktion ausgeführt (siehe Schlüssel complete), die nach dem Element mit #test ein Div mit der Aufschrift 'Animation complete.' platziert:

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

Die folgende Tabelle listet die Eigenschaften und Methoden des Objekts options und ihre Beschreibung auf:

Name	Beschreibung
`duration`	Dauer der Animation in Millisekunden - String oder Zahl. Standardmäßig `400ms`.
`easing`	Legt fest, welche Übergangsfunktion verwendet werden soll. Standardmäßig `swing`.
`queue`	Boolescher Wert oder String. Standardmäßig `true`. Gibt an, ob die Animation in die Warteschlange gestellt werden soll. Bei einem Wert von `false` startet die Animation sofort. Wenn der Parameter als String übergeben wird, wird die Animation in die Warteschlange mit diesem Namen gestellt. Bei Verwendung einer Warteschlange mit benutzerdefiniertem Namen startet die Animation nicht automatisch; um sie zu starten - verwenden Sie `dequeue('queuename')`.
`specialEasing`	Hier können Sie ein Objekt übergeben, in dem die Schlüssel CSS-Eigenschaften sind und die Werte die entsprechenden Übergangsfunktionen.
`step`	Eine Funktion, die für jede animierte Eigenschaft jedes animierten Elements aufgerufen wird. Sie ermöglicht es, das `Tween`-Objekt zu modifizieren, um den Wert der Eigenschaft zu ändern, bevor er gesetzt wird. Akzeptiert als Parameter den aktuellen Wert `tween` und das `Tween`-Objekt.
`progress`	Eine Funktion, die nach jedem Animationsschritt aufgerufen wird, jeweils nur einmal pro Element, unabhängig von der Anzahl der animierten Eigenschaften. Die Funktion akzeptiert drei Parameter: `animation` (als Promise), `progress` (Zahl von `0` bis `1`) und `remainingMs` (Anzahl der verbleibenden Millisekunden).
`complete`	Eine Funktion, die einmalig nach Abschluss der Animation des Elements aufgerufen wird. Die Funktion akzeptiert `animation` (als Promise).
`start`	Eine Funktion, die aufgerufen wird, wenn die Animation des Elements beginnt. Die Funktion akzeptiert `animation` (als Promise) und `jumpedToEnd` (Boolescher Wert. Wenn `true`, dann wird die Animation automatisch beendet).
`done`	Eine Funktion, die aufgerufen wird, wenn die Animation des Elements endet (ihr Promise wurde erfolgreich abgeschlossen). Die Funktion akzeptiert `animation` (als Promise) und `jumpedToEnd` (Boolescher Wert. Wenn `true`, dann wird die Animation automatisch beendet).
`fail`	Eine Funktion, die aufgerufen wird, wenn die Animation des Elements mit einem Fehler endet (ihr Promise wurde mit einem Fehler abgeschlossen). Die Funktion akzeptiert `animation` (als Promise) und `jumpedToEnd` (Boolescher Wert. Wenn `true`, dann wird die Animation automatisch beendet).
`always`	Eine Funktion, die aufgerufen wird, wenn die Animation des Elements abgeschlossen oder ohne Abschluss angehalten wird (ihr Promise wurde erfolgreich oder mit einem Fehler abgeschlossen). Die Funktion akzeptiert `animation` (als Promise) und `jumpedToEnd` (Boolescher Wert. Wenn `true`, dann wird die Animation automatisch beendet).

Beispiel

Lassen Sie uns beim Klicken auf die Schaltfläche #left das grüne Quadrat nach links schieben, und bei der Schaltfläche #right nach rechts um 50px, außerdem setzen wir die Dauer auf 600ms - mit dem Befehl slow:

<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Siehe auch

Methode show,
die Elemente sanft einblendet
Methode stop,
die es erlaubt, eine laufende Animation anzuhalten
Methode delay,
die eine Verzögerung der Ausführung von Ereignissen setzt
Eigenschaft jQuery.fx.off,
die es erlaubt, Animationen global zu deaktivieren
Selektor animated,
der Elemente auswählt, die momentan in einer Animation verwendet werden