jQuery Prägnant jQuery-Effekte

Deaktivieren Sie alle jQuery-Effektmethoden

Sie können alle von jQuery bereitgestellten Animationsmethoden deaktivieren, indem Sie einfach den Wert von setzen aus Eigentum an wahr.

    Versuche mich zu animieren!

Wann aus ist eingestellt auf wahr, Alle Effektmethoden werden nicht animiert und stattdessen mit den CSS-Regeln sofort ausgeblendet Anzeige: keine und Bildschirmsperre. Sie können die Animation wieder aktivieren, indem Sie die aus Eigenschaft a falsch Wert.

     Versuche mich zu animieren!

Grokking the stop () Animationsmethode

Häufig muss eine laufende Animation angehalten werden, bevor eine andere gestartet wird. Zum Beispiel, wenn Sie den benutzerdefinierten verwenden Mouseenter und mouseleave Ereignisse (oder schweben() Methode) können Sie versehentlich ein Element auslösen, das aufgrund eines vorherigen bereits animiert wird Mouseenter oder mouseleave Veranstaltung. Dies führt zu einem Aufbau von Animationen in der Warteschlange, die zu einer schleppenden Benutzeroberfläche führen. Um dies zu vermeiden, verwenden Sie einfach die halt() Methode, um die aktuelle Animation zu stoppen, bevor Sie eine neue starten.

     Schwebe über mich!

Entferne das halt() Methoden aus dem Code und rollen Sie den Mauszeiger mehrmals über das Element, um die Geist-Animationen zu sehen. Wenn Sie fortlaufend über das Element auf der Seite rollen, werden Animationen aufgebaut, die normalerweise nicht das gewünschte Ergebnis darstellen.

Anmerkungen: Darüber hinaus ist es nicht nur möglich, die aktuelle Animation in der Warteschlange für das select-Element zu stoppen, sondern auch die gesamte Warteschlange, indem sie die halt() Methode ein Parameter von wahr. Dadurch werden alle in der Warteschlange befindlichen Animationen effektiv und inaktiv angehalten.

Bestimmen, ob ein Element animiert wird mit: animiert

Der Brauch : animiert Mit dem Auswahlfilter können Sie Elemente auswählen, die gerade animiert werden. Im Folgenden verwende ich diesen benutzerdefinierten Auswahlfilter, um Text zu einer Animation hinzuzufügen

Element.

Verwenden Sie show (), hide () und toggle (), ohne Animation

Verwendung der Show(), verbergen(), und Umschalten() Methoden mit einem Parameter bewirken, dass die angezeigten oder ausgeblendeten Elemente animiert werden, indem die CSS-Eigenschaften geändert werden: Höhe, Breite, Deckkraft, Rand, Auffüllung. Es ist möglich, Animationen zum Ausblenden und Anzeigen von Elementen zu überspringen, indem einfach keine Parameter übergeben werden. Dadurch wird geändert, wie diese Methoden die Sichtbarkeit eines Elements anpassen. Betroffene Elemente werden ohne Anpassung durch Anpassen des CSS einfach angezeigt oder ausgeblendet Anzeige stattdessen Eigentum.

       Klicken Sie auf mich (Animation ausblenden)
 Klicken Sie auf mich (keine Animation ausblenden)

Anmerkungen: Die jQuery-Methoden verbergen(), Show(), Umschalten(), slideUp (), herunterrutschen(), slideToggle (), wenn für Elemente verwendet, die ein CSS haben Anzeige Wert von in der Reihe, wird in geändert Bildschirmsperre für die Dauer der Animation.

Sequenzielle und nicht sequentielle Animationen

Es ist wichtig, den Unterschied zwischen Animationen zu verstehen, die gleichzeitig ablaufen, und Animationen, die im Zeitablauf in einer sequentiellen Reihenfolge ablaufen. Wenn Effektmethoden verkettet werden, werden sie standardmäßig einer Warteschlange hinzugefügt, und jeder Effekt tritt nacheinander auf.

     Animiere mich! 
  Animiere mich!

Verwendung der animieren() Sie können Animationen so einstellen, dass sie nicht sequenziell oder gleichzeitig ausgeführt werden, indem Sie alle CSS-Eigenschaftsänderungen an eine einzige übergeben animieren() Methodenaufruf. Im folgenden Code steht der

animiert gleichzeitig seine Breite und die linke Breite.

    Animiere mich!

Animate () ist die Basis, Low-Level-Abstraktion

Das animieren() method ist die Basismethode, die zum Erstellen aller vorkonfigurierten Animationen verwendet wird, z. verbergen(), herunterrutschen(). Es bietet die Möglichkeit, die Werte der Stileigenschaften (im Laufe der Zeit) zu ändern.

Folgendes sollten Sie wissen, wenn Sie diese Methode verwenden.

Es werden nur Eigenschaften unterstützt, die numerische Werte annehmen. Mit anderen Worten, Sie können den Wert von beispielsweise nicht animieren Hintergrundfarbe Eigenschaft (zumindest nicht ohne Plugin). Auch Eigenschaften, die mehr als einen Wert annehmen, mögen backgroundPosition kann nicht animiert werden.
Sie können die CSS-Eigenschaften animieren, indem Sie ggf. em und% verwenden.
Relative Animationen können mit "+ =" oder "- =" vor dem Eigenschaftswert angegeben werden. Dies würde beispielsweise ein Element relativ zu seiner aktuellen Position positiv oder negativ verschieben.
Wenn Sie eine Animationsdauer von 0 angeben, setzt die Animation die Elemente sofort in den Endzustand.
Als Abkürzung, wenn ein Wert von Umschalten übergeben wird, wird eine Animation einfach umgekehrt und animiert.
Alle CSS-Eigenschaften werden über eine einzige festgelegt animieren() Methode wird gleichzeitig animiert.

Die jQuery Fading-Methoden grokken

Bei der Verwendung von sind drei Konzepte zu nennen einblenden(), ausblenden(), und fadeTo () Methoden.

Im Gegensatz zu anderen Effektmethoden wird bei Fading-Methoden nur die Deckkraft eines Elements angepasst. Bei der Verwendung dieser Effektmethoden wird davon ausgegangen, dass jedes ausgeblendete Element eine Höhe und Breite hat.
Verblassende Animationen werden Elemente von ihrer aktuellen Deckkraft ausblenden.
Verwendung der ausblenden() Die Methode blendet ein Element von seiner aktuellen Deckkraft aus. Sobald es zu 100% verblasst ist, ändert es die CSS-Anzeigeeigenschaft des Elements in "keiner".

Jeder der oben genannten Punkte ist im folgenden Code dargestellt.

Code

jQuery Prägnant jQuery Einführung

jQuery Prägnant jQuery und der Webbrowser