jQuery
jQuery .animate () - Methode
Suche…
Syntax
- (Selektor) .animate ({Stile}, {Optionen})
Parameter
| Parameter | Einzelheiten |
|---|---|
| Eigenschaften | Ein Objekt mit CSS-Eigenschaften und Werten, zu dem die Animation verschoben wird |
| Dauer | (Standard: 400) Eine Zeichenfolge oder Nummer, die bestimmt, wie lange die Animation ausgeführt wird |
| Lockerung | (Standardeinstellung: swing) Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll |
| Komplett | Eine Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist. Sie wird einmal pro übereinstimmendem Element aufgerufen. |
| Start | Gibt eine Funktion an, die ausgeführt werden soll, wenn die Animation beginnt. |
| Schritt | gibt eine Funktion an, die für jeden Schritt in der Animation ausgeführt werden soll. |
| Warteschlange | ein boolescher Wert, der angibt, ob die Animation in der Effektwarteschlange platziert werden soll oder nicht. |
| Fortschritt | gibt eine Funktion an, die nach jedem Schritt der Animation ausgeführt werden soll. |
| erledigt | Gibt eine Funktion an, die ausgeführt werden soll, wenn die Animation endet. |
| Scheitern | Gibt eine Funktion an, die ausgeführt werden soll, wenn die Animation nicht abgeschlossen wird. |
| specialEasing | Eine Karte mit einer oder mehreren CSS-Eigenschaften aus dem styles-Parameter und den entsprechenden Beschleunigungsfunktionen. |
| immer | Gibt eine Funktion an, die ausgeführt werden soll, wenn die Animation ohne Abschluss beendet wird. |
Animation mit Rückruf
Manchmal müssen wir die Wortposition von einem Ort zum anderen ändern oder die Größe der Wörter verkleinern und die Farbe der Wörter automatisch ändern, um die Attraktivität unserer Website oder Web-Apps zu verbessern. JQuery hilft mit diesem Konzept sehr viel mit fadeIn(), hide(), slideDown() aber seine Funktionalität ist begrenzt und es wurde nur die spezifische Aufgabe erledigt, die ihm zugewiesen wurde.
Jquery behebt dieses Problem, indem es eine erstaunliche und flexible Methode namens .animate() . Mit dieser Methode können Sie benutzerdefinierte Animationen festlegen, die css-Eigenschaften verwenden, die die Berechtigung zum Überfliegen von Grenzen geben. Wenn wir zum Beispiel die Eigenschaft css style als width:200; angeben width:200; und die aktuelle Position des DOM-Elements ist 50, animiere Methode den aktuellen Positionswert von einem gegebenen CSS-Wert und animiere dieses Element auf 150.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#btn1").click(function(){
$("#box").animate({width: "200px"});
});
</script>
<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
Liste der CSS-Style-Eigenschaften, die die .animate() -Methode zulassen.
backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing, wordSpacing, lineHeight, textIndent,
In der .animate() -Methode angegebene .animate() .
milliseconds (Ex: 100, 1000, 5000, etc.),
"slow",
"fast"
In .animate() -Methode angegebene .animate() .
| "Swing" |
| "linear" |
Hier einige Beispiele mit komplexen Animationsoptionen.
ZB 1:
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
opacity: "toggle"
}, 5000, "linear", function() {
$( this ).after( "<div>Animation complete.</div>" );
});
ZB 2:
$("#box").animate({
height: "300px",
width: "300px"
}, {
duration: 5000,
easing: "linear",
complete: function(){
$(this).after("<p>Animation is complete!</p>");
}
});