Die jQuery animate() -Methode können Sie benutzerdefinierte Animationen erstellen.
jQuery Animationen - Die animate() Methode
Das jQuery animate() Methode wird verwendet , um benutzerdefinierte Animationen zu erstellen.
Syntax:
$(selector).animate({params},speed,callback);Die erforderliche params Parameter definiert die CSS-Eigenschaften animiert werden.
Die optionale Geschwindigkeitsparameter gibt die Dauer des Effekts. Es kann folgende Werte annehmen: "slow", "fast" oder Millisekunden.
Der optionale Rückrufparameter eine Funktion ausgeführt werden soll, nachdem die Animation abgeschlossen ist.
Das folgende Beispiel zeigt eine einfache Nutzung des animate() Methode; Sie verschiebt die <div> Element nach rechts, bis er eine linke Eigenschaft von 250px erreicht hat:
Standardmäßig haben alle HTML-Elemente eine statische Position, und nicht bewegt werden kann.
Um die Position zu manipulieren, denken Sie daran, zuerst die CSS Position Eigenschaft des Elements zu setzen relative, fixed , oder absolute !
jQuery animate() - Manipulieren mehrere Eigenschaften
Beachten Sie, dass mehrere Eigenschaften können zur gleichen Zeit animiert werden:
Beispiel
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Versuch es selber " Ist es möglich , alle CSS-Eigenschaften mit dem zu manipulieren animate() Methode?
Ja fast! Allerdings gibt es eine wichtige Sache zu erinnern: alle Eigenschaftsnamen Kamel Gefasste sein müssen , wenn sie mit dem verwendeten animate() Methode: Sie müssen schreiben paddingLeft anstelle von padding-left, marginRight anstelle von margin-right , und so weiter.
Auch Farbanimation ist nicht im Kern jQuery Bibliothek enthalten.
Wenn Sie Farbe animieren möchten, müssen Sie die zum Download Farbe Animations - Plugin von jQuery.com.
jQuery animate() - Verwenden von relativen Werten
Es ist auch möglich, relative Werte zu definieren (der Wert wird dann relativ zu dem aktuellen Wert des Elements). Dies wird getan , indem += oder -= vor dem Wert:
Beispiel
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Versuch es selber " jQuery animate() - Verwenden von vordefinierten Werten
Sie können sogar eine Eigenschaft Animationswert als angegeben "show", "hide" oder "toggle" :
Beispiel
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Versuch es selber " jQuery animate() - Verwendet Queue - Funktionalität
Standardmäßig wird jQuery mit Queue-Funktionalität für Animationen.
Dies bedeutet , dass , wenn Sie mehrere Schreiben animate() ruft nach jedem anderen, jQuery eine "interne" Warteschlange mit diesen Methodenaufrufe erzeugt. Dann läuft er die belebter ruft eins nach dem anderen.
Also, wenn Sie verschiedene Animationen hintereinander ausführen möchten, nutzen wir die Warteschlange Funktionalität:
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");
});
Versuch es selber " Das folgende Beispiel zuerst bewegt das <div> Element auf der rechten Seite, und dann erhöht sich die Schriftgröße des Textes:
Beispiel 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»
jQuery Effects Referenz
Eine vollständige Übersicht über alle jQuery - Effekte, gehen Sie bitte auf unsere jQuery Effect Referenz .