Anwendungsbeispiele der animate()-Methode in jQuery_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung der animate()-Methode in jQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Diese Methode wird zum Erstellen einer benutzerdefinierten Animation verwendet und kann die Dauer der Animationsausführung und den Löscheffekt festlegen. Eine Callback-Funktion kann auch nach Abschluss der Animation ausgelöst werden.

Verwendung der animate()-Methode:

Methode 1:

Definieren Sie Eigenschaften des Animationsabschlussstils in Form von „Eigenschaftsnamen/-wert“-Objekten. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$("div").animate({width:"1000px" })

Der obige Code kann das Div von seiner ursprünglichen Breite auf 1000 Pixel anpassen. Sie können auch mehrere Sätze von Objekten „Eigenschaftsname/-wert“ gleichzeitig verwenden. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$("div").animate( {width: "1000px" ,Schriftgröße: 20})

Der obige Code kann das Div von der ursprünglichen Breite auf 1000 Pixel und die ursprüngliche Schriftgröße auf 20 Pixel anpassen. Auf die folgenden drei Punkte müssen Sie besonders achten:

1. Wenn die Größe keine Einheit hat, ist die Standardeinheit px.
2. Der Attributwert muss in doppelte Anführungszeichen gesetzt werden. Wenn der Attributwert eine Zahl ist, kann er weggelassen werden.
3. Attribute wie „font-szie“ oder „background-color“ müssen die mittlere horizontale Linie entfernen und der erste Buchstabe des zweiten Wortes muss großgeschrieben werden.

Die

animate()-Methode kann die Dauer des Animationseffekts eindeutig angeben. Wenn nicht angegeben, wird der Standardwert normal verwendet. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$("div").animate( {width: "1000px" ,Schriftgröße: 20},2000)

Der obige Code legt fest, dass der Animationseffekt nach 2000 Millisekunden (2 Sekunden) abgeschlossen ist.
Die Rückruffunktion kann aufgerufen werden, nachdem die Animationsausführung abgeschlossen ist. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$("div").animate( {width: "1000px" },5000 ,function(){alert("Anpassung abgeschlossen")})

Der obige Code kann die Rückruffunktion auslösen, nachdem die Animation abgeschlossen ist, sodass ein Eingabeaufforderungsfeld angezeigt wird.
Beispielcode:

Code kopieren Der Code lautet wie folgt:

Kleine Ameise

Animation ausführen




Methode 2:
Bei der ersten Methode werden geschweifte Klammern {} nur beim Definieren von Animationsabschlussstilattributen verwendet. Die folgenden Attribute, wie z. B. Animationsgeschwindigkeit, Rückruffunktion usw., werden durch Kommas getrennt. In der zweiten Methode, die wir vorstellen werden, müssen Geschwindigkeit, Rückruffunktion, Warteschlange usw. in geschweifte Klammern {} gesetzt werden.
Zum Beispiel:




Code kopieren

Der Code lautet wie folgt:

$("div").animate( {width: "1000px" }, { queue:false, duration:1000,complete:function(){alert("ok")}})

Der Warteschlangenparameter kann angeben, ob die Animation zur Ausführung zur Animationswarteschlange hinzugefügt wird. Wenn sie in die Animationswarteschlange gelangt, wird sie der Reihe nach ausgeführt, dh nach Abschluss der ersten Animation wird die zweite Animation in der Warteschlange ausgeführt wird ausgeführt und so weiter. Wenn der Warteschlangenparameterwert wahr ist, wird die Animation zur Ausführung zur Warteschlange hinzugefügt, andernfalls wird sie nicht zur Warteschlange hinzugefügt.
Der Parameter „Dauer“ definiert die Dauer der Animation.
Der vollständige Parameter definiert die Rückruffunktion der Animation.
Beispielcode:

Code kopieren Der Code lautet wie folgt:

Willkommen auf der Skript-Startseite

Willkommen auf der Skript-Startseite

Erste Animation ausführen
Führen Sie die zweite Animation aus

Sie können die Ausführungseffekte vergleichen, wenn Sie der Animationswarteschlange beitreten und nicht der Animationswarteschlange beitreten.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.