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!