Heim > Artikel > Web-Frontend > Vertiefendes Erlernen von jQuery Animate (1)
Der Inhalt dieses Artikels befasst sich mit dem detaillierten Erlernen von Animate in jQuery (1), damit Sie die Verwendung von Animate in jQuery besser verstehen können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Wie viel wissen Sie über die Verwendung von Animate in jQuery? Wenn es sich nur um eine einfache Positionsänderung handelt, zeigen und verbergen Sie, oh! Oh mein Gott, du verschwendest Ressourcen! Da animate so leistungsstark ist, können Sie es auf viele unerwartete Arten verwenden! Lass es uns gemeinsam studieren. [Empfohlene verwandte Video-Tutorials: jQuery-Tutorial]
Zunächst müssen Sie die detaillierte Verwendung von Animate in der jQuery-API verstehen.
animate: Gibt das jQuery-Objekt zurück
animate( properties [, duration ] [, easing ] [, complete ] )
Beschreibung: Führt eine benutzerdefinierte Animation basierend auf einer Reihe von CSS-Eigenschaften durch.
1. animieren( Eigenschaften [, Dauer ] [, Lockerung ] [, vollständig ] )
1. Eigenschaften
Typ:PlainObject
Ein Objekt mit CSS-Eigenschaften und -Werten. Die Animation bewegt sich entsprechend diesem Satz von Objekten.
2. Dauer (Standard: 400)
Typ: Zahl oder Zeichenfolge
Eine Zeichenfolge oder Zahl bestimmt, wie lange die Animation ausgeführt wird. (Standardwert: „normal“, Zeichenfolge „langsam“, „normal“ oder „schnell“ oder Millisekundenwert, der die Animationsdauer angibt (z. B. 1000))
3 >
Typ: StringEine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll. (jQuery selbst bietet „linear“ und „swing“) 4. Typ: Function() Funktion wird ausgeführt, wenn die Animation abgeschlossen ist.2. animieren (Eigenschaften, Optionen)
1. Eigenschaften
Typ: PlainObjectEin Objekt mit CSS-Eigenschaften und -Werten. Die Animation bewegt sich entsprechend diesem Satz von Objekten. 2, OptionenTyp: PlainObject
Eine Reihe von Werten, die Animationsoptionen enthalten. Unterstützte Optionen: 1), Dauer (Standard: 400)Typ: Zahl oder ZeichenfolgeEine Zeichenfolge oder Zahl bestimmt, wie lange die Animation ausgeführt wird. (Fool's Pier Hinweis: Standardwert: „normal“, drei vorgegebene Geschwindigkeitszeichenfolgen („langsam“, „normal“ oder „schnell“) oder ein Millisekundenwert, der die Animationsdauer angibt (z. B. 1000)) 2), Beschleunigung (Standard: Swing)Typ: StringEine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll. (Anmerkung von Fool's Wharf: jQuery selbst bietet „linear“ und „swing“, und andere Effekte können das jQuery Easing Plugin verwenden) 3), Warteschlange( Standard: true)Typ: Boolescher Wert oder String
Ein boolescher Wert, der angibt, ob die Animation in die Effektwarteschlange gestellt werden soll. Bei „false“ startet die Animation sofort. Ab jQuery 1.7 kann die Option queue auch eine Zeichenfolge akzeptieren. In diesem Fall wird die Animation der durch diese Zeichenfolge dargestellten Warteschlange hinzugefügt. Wenn ein benutzerdefinierter Warteschlangenname verwendet wird, startet die Animation nicht automatisch; Sie müssen .dequeue("queuename") aufrufen, um sie zu starten. 4), specialEasingTyp: PlainObjectEine oder mehrere CSS-Eigenschaften, die durch die ersten Parametereigenschaften dieser Methode und ihre entsprechende Beschleunigungsfunktion definiert werden. Eine Karte von Schlüssel- Wertepaare. (Neu in 1.4)5), SchrittTyp: Funktion (Jetzt Zahl, Tween-Tween)
Alle Die Funktion, die für jede animierte Eigenschaft eines animierten Elements aufgerufen wird. Diese Funktion bietet die Möglichkeit, das Tween-Objekt zu ändern, um die Eigenschaftswerte in den Einstellungen zu ändern. 6), FortschrittTyp: Funktion (Promise-Animation, Anzahl Fortschritt, Anzahl verbleibender Ms)
Animation für jeden Schritt Eine nach Abschluss aufgerufene Funktion, die für jedes animierte Element eine separate Funktion ausführt, unabhängig davon, wie viele Animationseigenschaften vorhanden sind. (hinzugefügte Version: 1.8)7), vollständigTyp: Funktion()Funktion wird ausgeführt, wenn die Animation abgeschlossen ist. 8), fertigTyp: Funktion (Promise-Animation, Boolean jumpedToEnd)Funktion wird ausgeführt, wenn die Animation abgeschlossen ist. (Sein Promise-Objektstatus wurde abgeschlossen.) (hinzugefügte Version: 1.8)9), failTyp: Funktion( Promise-Animation, Boolean jumpedToEnd ) Animation fehlgeschlagen Funktion, die nach Abschluss ausgeführt werden soll. (Sein Promise-Objektstatus ist nicht abgeschlossen). (hinzugefügte Version: 1.8)10), immerTyp: Funktion( Promise Animation, Boolean jumpedToEnd )Wird ausgeführt, wenn die Animation abgeschlossen ist, oder gestoppt, wenn dies nicht der Fall ist abgeschlossene Funktion. (Sein Promise-Objektstatus ist abgeschlossen oder unvollständig). (hinzugefügte Version: 1.8) Für einige grundlegende Anwendungen können Sie sich auf die jQuery-API oder die chinesische jQuery-API beziehen. Der orangefarbene Teilist das, worauf ich mich in diesem Artikel konzentrieren möchte! PlainObject
PlainObject类型，是Javascript对象包含0个或者跟多键值对。换句话说，PlainObject也是Object对象。但在jQuery文档中，被设计是为了区分其他多种Javascript对象。如null,用户自定义的数组，或者是主机对象向如document,typeof 值都是 “object”。通过jQuery.isPlainObject()方法来判断传入的的参数是否是PlainObject.
var a = [];
var d = document;
var o = {};
typeof a; // object
typeof d; // object
typeof o; // object
jQuery.isPlainObject( a ); // false
jQuery.isPlainObject( d ); // false
jQuery.isPlainObject( o ); // true
queue
一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
它是来决定不同动画进行的顺序。
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
#block1要执行的动画中，使用了 queue: false 选项，该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了，边框的动画就会开始。注意到是并且了吗？是同时进行的~~
#block2要执行的动画中，包含了一系列动画，当前一个动画完成时，后一个动画就会开始。
关于 step 就留到下次在讲解吧！
Das obige ist der detaillierte Inhalt vonVertiefendes Erlernen von jQuery Animate (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!