jQuery-Effekte - Animation
Mit jQuery können Sie benutzerdefinierte Animationen erstellen.
jQuery-Animationen - Die animate()-Methode
Die jQuery- animate()Methode wird verwendet, um benutzerdefinierte Animationen zu erstellen.
Syntax:
$(selector).animate({params},speed,callback);
Der erforderliche Parameter params definiert die zu animierenden CSS-Eigenschaften.
Der optionale Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: "langsam", "schnell" oder Millisekunden.
Der optionale Callback-Parameter ist eine Funktion, die nach Abschluss der Animation ausgeführt werden soll.
Das folgende Beispiel demonstriert eine einfache Verwendung der animate()Methode; es verschiebt ein <div>-Element nach rechts, bis es eine linke Eigenschaft von 250px erreicht hat:
Beispiel
$("button").click(function(){
$("div").animate({left: '250px'});
});
Standardmäßig haben alle HTML-Elemente eine statische Position und können nicht verschoben werden.
Um die Position zu manipulieren, denken Sie daran, zuerst die CSS-Positionseigenschaft des Elements auf relativ, fest oder absolut einzustellen!
jQuery animate() - Manipuliert mehrere Eigenschaften
Beachten Sie, dass mehrere Eigenschaften gleichzeitig animiert werden können:
Beispiel
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Ist es möglich, ALLE CSS-Eigenschaften mit der Methode animate() zu manipulieren?
Ja fast! Beachten Sie jedoch eine wichtige Sache: Alle Eigenschaftsnamen müssen in Camel-Case geschrieben werden, wenn sie mit der Methode animate() verwendet werden: Sie müssen paddingLeft statt padding-left, marginRight statt margin-right usw. schreiben.
Außerdem ist die Farbanimation nicht in der jQuery-Kernbibliothek enthalten.
Wenn Sie Farbe animieren möchten, müssen Sie das
Color Animations-Plugin von jQuery.com herunterladen.
jQuery animate() - Relative Werte verwenden
Es können auch relative Werte definiert werden (der Wert ist dann relativ zum aktuellen Wert des Elements). Dies geschieht, indem += oder -= vor den Wert gesetzt wird:
Beispiel
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - Verwendung vordefinierter Werte
Sie können sogar den Animationswert einer Eigenschaft als „ show“, „ hide“ oder „ toggle“ angeben:
Beispiel
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Verwendet die Warteschlangenfunktion
Standardmäßig verfügt jQuery über eine Warteschlangenfunktion für Animationen.
Das bedeutet, wenn Sie mehrere animate()Aufrufe hintereinander schreiben, erstellt jQuery mit diesen Methodenaufrufen eine "interne" Warteschlange. Dann führt es die animierten Anrufe EINS nach EINS aus.
Wenn Sie also verschiedene Animationen nacheinander ausführen möchten, nutzen wir die Warteschlangenfunktion:
Beispiel 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Das folgende Beispiel verschiebt das <div>Element zuerst nach rechts und vergrößert dann die Schriftgröße des Textes:
Beispiel 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
jQuery-Übungen
Referenz zu jQuery-Effekten
Eine vollständige Übersicht aller jQuery-Effekte finden Sie in unserer jQuery-Effekt-Referenz .