So erstellen Sie benutzerdefinierte Animationen in JQuery
Die Animationen fügen verschiedene verschönernde Effekte hinzu, um die Zuschauer zu engagieren. JQuery unterstützt eine lange Liste von Methoden zur Durchführung verschiedener Operationen. Die Methode jQuery Animate () wird zum Erstellen benutzerdefinierter Animationen in JQuery verwendet. Die CSS -Eigenschaften sind der Hauptdarsteller der Jquery Animate () -Methode. Diese Eigenschaften können mit verschiedenen Geschwindigkeiten mit verschiedenen Werten animiert werden. Dieser Beitrag zielt darauf ab, detaillierte Richtlinien zu Animationen in JQuery mit den folgenden Lernergebnissen zu geben
- Arbeitsmechanismus der Animate () -Methode
- Erstellen benutzerdefinierter Animationen (mit Beispielen)
Wie man animate () Methode funktioniert in jQuery funktioniert
Die zum Erstellen von Animationen verwendete Animate () -Methode hat die folgende Syntax.
$ (Selektor).Animate (CSS, Geschwindigkeit, Rückruf);Die oben angegebene Syntax hat die folgenden Instanzen
- Wähler Kann jeder Elementname, eine Klasse oder ID eines Elements sein
- Der CSS Ein Teil der Animate () -Methode ist obligatorisch für Animationen und das CSS -Eigentum, das Sie animieren möchten, würde in der liegen CSS Teil der Syntax
- Der Geschwindigkeit definiert die Dauer der Animation und sie kann entweder auf "schnell", "langsam" oder in Millisekunden (numerischer Wert) eingestellt werden (numerischer Wert)
- Zuletzt die Ruf zurück ist ein optionaler Parameter und wird verwendet, um nach der Ausführung der Animation eine gewisse Verarbeitung anzuzeigen
Die Animate () -Syntax verarbeitet den numerischen Wert zur Änderung des CSS. Beispielsweise kann die Eigenschaft von HintergrundColor nicht unter Verwendung des Farbnamens festgelegt werden, daher ist die CSS -Farbeigenschaft nicht in JQuery -Animationen enthalten. Darüber hinaus müssen die Immobiliennamen in Kamelfall wie BorderColor, Grenzbreite usw. vorhanden sein.
So erstellen Sie benutzerdefinierte Animationen in JQuery
Wie bereits erwähnt, wird die Animate () -Methode geübt, um JQuery -Animationen zu erstellen. Die animierte Methode kann in den folgenden Szenarien verwendet werden
Mehrere Animationen gleichzeitig: Alle angegebenen Animationen werden in einem einzigen GO durchgeführt.
Animieren der CSS -Eigenschaften nacheinander: In diesem Fall wird die Animate () -Methode auf sequentielle Weise angewendet (eine nach dem anderen).
Animation des relativen Werts: Normalerweise werden die CSS -Eigenschaften unter Verwendung des aktuellen Wertes einer CSS -Eigenschaft animiert. Die Animate () -Methode ermöglicht es jedoch, dynamische Animationen mithilfe des relativen Wertphänomens durchzuführen.
Wir würden die möglichen Wege in den kommenden Beispielen üben.
Beispiel 1: Mehrere Animationen gleichzeitig
Fast alle CSS -Eigenschaften können mit der Animate () -Methode animiert werden. Dieses Beispiel zeigt den Animationseffekt jQuery () anhand mehrerer CSS -Eigenschaften.
Im obigen Code,
- Verschiedene CSS -Eigenschaften (Breite, Höhe und Schriftgröße) des Div -Elements werden animiert
- Die Geschwindigkeit ist auf langsam eingestellt
Ausgang
Vor der Animation
Nach Animation
Beispiel 2: eins nach dem anderen
Der Animationseffekt kann durch Animieren von CSS -Eigenschaften nacheinander verschönert werden. Schauen wir uns diese Methode an.
Der obige Code übt die Animation auf einem div Element und wird unten erklärt
- Die Polsterung, Höhe, Breite und Grenzbreite mit verschiedenen Geschwindigkeitswerten
- Erstens wird die Polsterung animiert, folgt animiert nach Höhe, Breite und Grenzbreite
Ausgang
Vor dem Animieren
Nach Animieren
Beispiel 3: relative Werte
Die relativen Werte werden mit zwei Zuordnungsoperatoren "+=" und "-=" generiert. Der aktuelle Wert der CSS -Eigenschaft wird als Referenzwerte angenommen, und neue Werte werden durch Hinzufügen/Subtrahieren eines numerischen Werts von diesem aktuellen Wert generiert.
Im obigen Code,
- Die Breite und Höhe des DIV werden animiert
- Bei jedem Klick (in unserem Fall) erhöht sich die Breite um 10px während die Höhe durch verringert wird 5px.
Ausgang
Vor der Animation,
Nach mehreren Klicks,
Beispiel 4: Verwenden von Zeichenfolgenwerten
Die Animate () -Methode akzeptiert nur drei Zeichenfolgewerte (verstecken, zeigen oder umschalten) für CSS -Eigenschaften. Die Umschaltungseigenschaft kann die versteckte Eigenschaft animieren, um umgekehrt zu zeigen und umgekehrt.
Im obigen Code die Zeigen und umschalten Operationen werden auf durchgeführt Breite und Höhe bzw. Dafür haben wir Button Class = "verwendet."Umschalten"Und class ="zeigen” .
Ausgang
Vor der Animation,
Nach dem Klicken auf die Schaltfläche "Schalter" ändert die Breite ihren Status (nach versteckt wie in der “zeigen”Zustand), wie im folgenden Bild zu sehen ist.
Wenn Sie auf die Schaltfläche SHOW klicken, wird die DIV erneut angezeigt.
Die Animationen spielen eine Schlüsselrolle bei der Befolgung von Inhalten. Wenn Sie diese Beispiele befolgen, hätten Sie die benutzerdefinierte Erstellung von Animationen in Jquarry gelernt.
Abschluss
Die Methode Animate () wird verwendet, um benutzerdefinierte Animationen in JQuery zu erstellen. Die Animate () -Methode kann auf einmal mehreren CSS -Eigenschaften angewendet werden oder auch auf sequentielle Weise angewendet werden. Dieser Artikel enthält eine detaillierte Anleitung zum Erstellen benutzerdefinierter Animationen in JQuery. Sie würden ein Verständnis der Animate () -Methode (primärer Stakeholder für Animationen) erhalten. Darüber hinaus werden einige Beispiele gezeigt, die die Erstellung benutzerdefinierter Animationen in JQuery zeigen.