Ein Leitfaden für die Jquery Animate () -Methode

Kernpunkte

Die
• jQuery -Methode ist ein vielseitiges Tool, mit dem Entwickler benutzerdefinierte Animationen erstellen können, indem die CSS -Eigenschaften von Elementen über eine bestimmte Dauer schrittweise geändert werden. animate() Die
• -Methode ist nur für numerische CSS -Eigenschaften geeignet und für extrem komplexe Animationen nicht geeignet, da Leistungsprobleme auftreten können. animate()
Die Methode ist hauptsächlich in zwei Formen ausgestattet:
• und animate(properties[, duration][, easing][, callback]), und die meisten Parameter sind optional. Diese Parameter steuern Aspekte der Animation wie Dauer, Lockerungsfunktion und was nach Abschluss der Animation passiert. animate(properties[, options])
Entwickler können komplexere Animationen erstellen, indem mehrere
• -Methoden miteinander verknüpft werden, sodass Animationssequenzen in der Reihenfolge von Aufrufen ausgeführt werden können. Diese Funktion wird als "Warteschlange" bezeichnet, die die Funktionalität und Flexibilität von JQuery -Animationen verbessert. animate()

jQuery ist eine hervorragende Bibliothek, die die Art und Weise, wie Tausende von Entwicklern im Laufe der Jahre umgehen, verändert hat. Beim Erstellen von JQuery können CSS keine komplexen Animationen erstellen und nur JavaScript verwenden. JQuery ist eine große Hilfe bei Animationen, da für diesen Zweck verschiedene Methoden erstellt wurden. Obwohl es mit einigen einfachen Animationen (

, fadeIn(), hide() usw.) ausgestattet ist, um sie leicht zu halten, bietet die Bibliothek eine sehr flexible Möglichkeit, alles zu erstellen, was wir wollen, Animation. Dies ist Gegenstand dieses Artikels. JQuery's slideDown() ist eine animate() -Wrapper -Methode animate(), was bedeutet, dass sie auf einem Satz zuvor ausgewählter DOM -Elemente von JQuery betrieben wird. Mit dieser Methode können Sie Ihre eigenen benutzerdefinierten Animationseffekte auf Elemente in Ihrer Sammlung anwenden. Dazu müssen wir eine Reihe von Eigenschaften und Werten im CSS -Stil bereitstellen, die am Ende der Animation erreicht werden. Der Zwischenwert des Stils während des Animationseffekts (der automatisch von der Animation Engine verarbeitet wird) wird durch die Effektdauer und die Lockerungsfunktion bestimmt, die wir bald diskutieren werden. Die Attributliste im CSS-Stil, die animiert werden kann, beschränkt sich auf die Eigenschaften, die numerische Werte akzeptieren. Dieser Wert kann ein absoluter Wert (z. B. 200) oder ein relativer Wert aus dem Startpunkt sein. Für absolute Werte geht JQuery davon aus, dass Pixel Standardeinheiten sind. Wir können auch andere Einheiten wie EM, REM oder Prozentsatz angeben. Um einen relativen Wert anzugeben, müssen wir oder vorab vornehmen, um den relativen Zielwert in den positiven bzw. negativen Richtungen anzugeben. Jetzt, da wir = ein gewisses Verständnis haben, ist es Zeit, seine Signatur und Parameter zu betrachten. -= animate()

Signatur und Parameter

Diese Methode hat zwei Hauptformen, die meisten ihrer Parameter sind optional (in den üblichen quadratischen Klammern angegeben):

• animate(properties[, duration][, easing][, callback])
• animate(properties[, options])

Über Parameter gibt es viel zu sagen:

• properties (Objekt): Eine Hash -Tabelle, die den Wert enthält, der am Ende der Animation erreicht werden sollte.
• duration (Zahl | String): Effektdauer (in Millisekunden) oder einer der vordefinierten Saiten: "Slow" (600 Millisekunden), "normal" (400 Millisekunden) oder "Fast" (200 ms). Standard ist "normal".
• easing (String): Der Name der Locking -Funktion, die bei der Durchführung der Konvertierung verwendet werden soll. Der Standardwert ist "Swing".
• callback (Funktion): Eine Funktion, die ausgeführt wird, wenn sie für jedes Animationselement animieren.
• options (Objekt): Eine Hash -Tabelle mit einer Reihe von Optionen, die an die Methode übergeben werden können. Die verfügbaren Optionen sind wie folgt:
  • always (Funktion): Eine Funktion, die auf dem Namen, wenn die Animation abgeschlossen ist oder gestoppt, aber nicht abgeschlossen ist.
  • complete (Funktion): Funktion, die nach Abschluss der Animation ausgeführt wird.
  • done (Funktion): Die nach Abschluss der Animation aufgerufene Funktion.
  • duration (Zeichenfolge | Nummer): Wie oben beschrieben.
  • easing (String): Wie oben beschrieben.
  • fail (Funktion): Funktion, die ausgeführt wird, wenn die Animation fehlschlägt.
  • progress (Funktion): Funktionen, die nach jedem Schritt der Animation ausgeführt werden. Diese Funktion wird nur einmal pro Animationselement aufgerufen.
  • queue (Bolean): Wenn die Animation in der Effektwarteschlange gestellt werden muss (dazu später mehr). Der Standardwert ist wahr.
  • specialEasing (Objekt): Eine Hash -Tabelle einer oder mehrerer CSS -Eigenschaften, deren Wert eine Lockerungsfunktion ist.
  • start (Funktion): Funktion, die zu Beginn der Animation ausgeführt wird.
  • step (Funktion): Eine Funktion, die jedes Animationsattribut jedes Animationselements aufruft.

Der Begriff Easy wird verwendet, um die Art und Weise zu beschreiben, wie Frame -Geschwindigkeiten verarbeitet und animiert werden. Wenn die Option queue auf true eingestellt ist, erlauben wir, dass die Animation nacheinander ausgeführt wird, und wenn auf False festgelegt wird, darf die Animation parallel ausgeführt werden. Dies gibt uns viel Kraft, die wir so nutzen können, wie wir möchten. Im Rest dieses Artikels werden wir einige praktische Anwendungen dieser Parameter demonstrieren, damit Sie die Möglichkeit von animate() erleben können.

Beispiel verwendet

In diesem Abschnitt werden wir einige Demonstrationen erstellen, um die Kraft von animate() zu machen. Denken Sie daran, dass dieser Ansatz aufgrund von Problemen im Zusammenhang mit der Leistung und Fließung der Animation nicht für sehr, sehr komplexe Animationen geeignet ist.

Führen Sie eine einzelne Animation

aus

Eine einzelne Animation ist sehr einfach. Rufen Sie einfach einmal die Methode an. Zum Beispiel möchten wir Elemente möglicherweise von einer Seite der Box zur anderen bewegen. Um diese Animation zu veranschaulichen, setzen wir zwei Divelemente, eine in den anderen. Wir werden sie so stylen, dass das innere Div einen roten Hintergrund hat. Der Code dazu ist wie folgt. Html:

<div class="rectangle">
  <div class="square-small"></div>
</div>

CSS:

.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}

Mit der Kraft von animate() bewegen wir kleine Quadrate von einer Seite zur anderen:

$('.rectangle')
  .find('.square-small')
  .animate({
    left: 280
  }, 'slow');

In diesem Code geben wir an, dass das Attribut left das einzige zu animierten Attribut ist. Wir setzen die Animationsdauer auf den voreingestellten Wert langsam (600 Millisekunden). Wir verwenden absolute Werte, um das interne <div> (mit Klasse .square-small) zu verschieben. Dieser Wert basiert auf der Containerbreite, die wir mit dem zuvor aufgeführten CSS -Code festgelegt haben. Diese Lösung ist nicht sehr flexibel, da wenn wir die Breite des Behälters ändern, erreicht der interne <div> die andere Seite nicht (wenn wir eine breitere Breite auf den Container festlegen) oder überschreiten sie (wenn wir eine engere Breite festlegen ). Eine Lösung besteht darin, den Wert des <div> -attributs basierend auf der Berechnung der aktuellen Breite des externen und internen left zu setzen, wie unten gezeigt:

left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()

Ausführen mehrerer Animationen in Loop

Ausführen mehrerer Animationen auf einem Element oder einer Gruppe von Elementen ist so einfach wie das Verknüpfen von Aufrufen mit animate(). In diesem Beispiel werden wir ein kleines Quadrat bewegen, wenn es entlang des Umfangs der inneren Sanduhr des großen Quadrats (und nicht eines Rechtecks) bewegt wird. Um diese Demo zu erstellen, werden wir das folgende Tag verwenden:

<div class="square-big">
  <div class="square-small"></div>
</div>

Für Stile müssen wir dieselben CSS verwenden, die wir für .square-small sowie die folgenden Stile verwendet haben, um den Stil des äußersten Quadrats festzulegen:

.square-big {
  width: 300px;
  height: 300px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

Der letzte Schritt besteht darin, JavaScript -Code zu schreiben, um die vier Zeilen zu zeichnen, aus denen der ideale Sanduhr -Umfang besteht. Ausgehend von der oberen linken Ecke des äußersten Quadrats müssen wir das kleine Quadrat animieren, bis es die untere rechte Ecke des großen Quadrats erreicht. Kleine Quadrate müssen sich diagonal bewegen, um Effekte zu erzielen. Sobald es die untere rechte Ecke erreicht, müssen wir es in die untere linke Ecke bewegen. Es muss dann die obere rechte Ecke erreichen und schließlich in seine ursprüngliche Position zurückkehren. Bei der Einführung dieser Demo sagten wir, wir möchten unendliche Animationen durchführen. Wir müssen also einen Weg finden, die gesamte Animation erneut auszuführen, sobald der letzte Schritt abgeschlossen ist. Dazu können wir den Anruf in die vier verknüpften animate() -Anrufe in einer Funktion einwickeln, sodass wir eine Funktion zur Referenz haben. Wir können dann den oben genannten complete Callback und IIfe verwenden, um die Animation erneut auszuführen, wenn der letzte Schritt abgeschlossen ist. Das Ergebnis der Konvertierung dieser Beschreibung in Code ist wie folgt:

(function animation() {
  var options = {
    duration: 800,
    easing: 'linear'
  };

  $('.square-big')
    .find('.square-small')
    .animate({
      left: 280,
      top: 280
    }, options)
    .animate({
      left: 0
    }, options)
    .animate({
      left: 280,
      top: 0
    }, options)
    .animate({
      left: 0
    }, $.extend(true, {}, options, {
      complete: function() {
        animation();
      }
    }));
})();

In dem obigen Code beachten Sie bitte, wie wir die options Variable verwenden, damit wir beim Aufrufen von animate() nicht die gleichen Parameter schreiben müssen. Da wir beim letzten Mal options den complete Rückruf hinzufügen mussten, haben wir die extend() -Methode von JQuery verwendet.

Mehr Rückrufvorgänge

Als unser letztes Beispiel setzen wir die Eigenschaften options, start und complete des Parameters progress (der zweite Parameter der zweiten Form) fest. Ziel ist es, die Schaltfläche zu deaktivieren, die die Animation ausführt, wenn die Animation ausgeführt wird. Danach möchten wir den Prozentsatz der Animationsabschluss zeigen. In diesem Beispiel werden wir die erste Demo ändern, die wir erstellt haben. Gemäß der Beschreibung müssen wir eine Taste und ein Element (wir werden eine Spanne verwenden) hinzufügen, um den Prozentsatz anzuzeigen. Diese Änderung führt im folgenden Tag:

<div class="rectangle">
  <div class="square-small"></div>
</div>

Wir müssen nicht mehr Stile hinzufügen, damit wir zur Diskussion über JavaScript -Code springen können. Um die Animation nur dann auszuführen, wenn die Schaltfläche klickt, müssen wir dem Klickereignis der Schaltfläche einen Handler hinzufügen. Innerhalb des Handlers verwenden wir die prop() -Methode von JQuery, um die Schaltflächen zu deaktivieren und zu aktivieren, basierend darauf, ob die Animation ausgeführt oder abgeschlossen ist. Schließlich verwenden wir den zweiten Parameter, der an den an die progress angeschlossenen Handler übergeben wurde, um den Prozentsatz der Animationsabschluss anzuzeigen. Der generierte Code sieht so aus:

.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}

Schlussfolgerung

In diesem Artikel wird erläutert, was Sie mit der animate() -Methode von JQuery machen können. Wir stellen seine Signatur und seine akzeptierten Parameter ein. In diesem Artikel untersuchen wir drei Beispielanimationen. In diesem Artikel wird nur kurz die Möglichkeit von animate() eingeführt. Tatsächlich können wir mit ein wenig Geduld und Kreativität wirklich komplexe und schöne Animationen schaffen.

häufig gestellte Fragen (FAQ)

Was ist die JQuery Animate -Methode und wie funktioniert sie?

Die

jQuery Animate -Methode ist ein leistungsstarkes Tool, mit dem Sie benutzerdefinierte Animationen erstellen können. Es funktioniert, indem es die CSS -Eigenschaften eines Elements schrittweise geändert hat, wobei die von Ihnen angegebene Dauer angegeben ist. Sie können alle CSS -Attribute animieren, müssen jedoch die Attribute mit dem Kamelfall angeben, z. B. marginLeft anstelle von margin-left. Mit der Animate -Methode können Sie außerdem Lockerungsfunktionen angeben, die die Geschwindigkeit der Animation steuern, sowie die Rückruffunktionen, die nach Abschluss der Animation ausgeführt werden.

Wie kann ich die Animation anhalten oder innehalten?

jQuery bietet eine stop() -Methode, um die Animation zu stoppen. Diese Methode stoppt die aktuell ausgeführte Animation im ausgewählten Element. Wenn Sie die Animation pausieren möchten, wird sie etwas komplizierter sein, da JQuery keine integrierte Methode dafür bietet. Sie können dies jedoch tun, indem Sie Plugins verwenden oder den Animationsfortschritt manuell steuern.

Kann ich JQuery Animation verwenden, um mehrere Eigenschaften gleichzeitig zu bewältigen?

Ja, Sie können die JQuery Animate -Methode verwenden, um mehrere CSS -Eigenschaften gleichzeitig zu animieren. Sie müssen nur alle Eigenschaften einfügen, die in das properties -Objekt animiert werden sollen. Zum Beispiel können Sie gleichzeitig die Breite und Höhe eines Elements animieren.

Wie verwende ich die Schrittfunktion in JQuery Animate?

Die Schrittfunktion in JQuery Animate ist eine Rückruffunktion, die in jedem Schritt der Animation ausgeführt wird. Diese Funktion übergibt zwei Parameter: now, was der aktuelle Wert der Animationseigenschaft ist; Sie können die Schrittfunktion verwenden, um komplexe Animationen oder Debugg -Animationen zu erstellen. fx

Kann ich JQuery Animate für nicht numerische CSS-Eigenschaften verwenden?

Nein, die Animate -Methode von JQuery gilt nur für numerische CSS -Eigenschaften. Wenn Sie versuchen, nicht numerische Eigenschaften wie Farbe oder Hintergrundfarbe zu animieren, funktioniert dies nicht. Sie können diese Eigenschaften jedoch mit Plugins wie JQuery UI oder JQuery Color animieren.

Wie kann ich JQuery Animate verwenden, um Animation zu verknüpfen?

Sie können JQuery -Animationen verknüpfen, indem Sie einfach mehrere Animate -Methoden nacheinander aufrufen. JQuery wird die Animation in der Reihenfolge des Anrufs ausführen. Dies nennt man "Warteschlangen" und ist ein leistungsstarkes Merkmal von JQuery Animation.

Kann ich JQuery Animate verwenden, um einen Gleiteffekt zu erzielen?

Ja, Sie können mit der Jquery Animate -Methode einen Gleiteffekt erzeugen. Sie können dies tun, indem Sie die Höhe oder Breite des Elements animieren. JQuery bietet jedoch auch

, slideDown und slideUp Methoden, die einfacher zu verwenden sind, wenn Sie nur einfache Gleiteffekte erzeugen möchten. slideToggle

Wie kann ich meine jQuery -Animation glatter machen?

Es gibt mehrere Möglichkeiten, Ihre JQuery -Animationen reibungsloser zu machen. Eine Möglichkeit besteht darin, Lockerungsfunktionen zu verwenden, die die Geschwindigkeit der Animation steuern. Ein anderer Ansatz ist die Verwendung der

-Methode, mit der der Browser Animationen optimieren kann. Sie können auch die Leistung verbessern, indem Sie die Anzahl der DOM -Operationen minimieren und CSS -Conversions nach Möglichkeit verwenden. requestAnimationFrame

Kann ich JQuery Animate für eine Reihe von Elementen verwenden?

Ja, Sie können die JQuery Animate -Methode für eine Reihe von Elementen verwenden. Wenn Sie die Animate -Methode auf einem JQuery -Objekt mit mehreren Elementen aufrufen, wird die Animation auf alle Elemente der Sammlung angewendet.

Wie kann man einen Fade -Effekt mit JQuery Animim erzeugen?

Sie können einen Fade -Effekt anhand der Jquery Animate -Methode erzeugen, indem Sie das Attribut

animieren. JQuery bietet jedoch auch Methoden opacity, fadeIn und fadeOut, die einfacher zu verwenden sind, wenn Sie nur einfache Fade -Effekte erzeugen möchten. fadeToggle

Das obige ist der detaillierte Inhalt vonEin Leitfaden für die Jquery Animate () -Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!