So verwenden Sie animate, um Animationen in jQuery anzupassen

Animation animate()

　01. Einfache Verwendung der animate()-Methode

　Einige komplexe Animationen können nicht durch mehrere zuvor erlernte Animationsfunktionen realisiert werden, und dieses Mal ist es die leistungsstarke animate-Methode .

Betätigen Sie ein Element, um eine 3-sekündige Einblendanimation durchzuführen. Vergleichen Sie die Unterschiede zwischen den beiden Sätzen von Animationseinstellungen.

$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)

Es ist offensichtlich, dass die Animationsmethode flexibler ist und die Stilattribute zur Durchführung von Animationen genau steuern kann.

Syntax:

1 .animate( Eigenschaften [, Dauer ] [, Lockerung ] [, vollständig ] )

2 .animate( Eigenschaften, Optionen )

　Mit der Methode .animate() können wir Animationen für jede numerische CSS-Eigenschaft erstellen. Die beiden Syntaxen sind nahezu identisch. Das einzige notwendige Attribut ist ein Satz von CSS-Attribut-Schlüssel-Wert-Paaren. Dieser Satz von Eigenschaften ähnelt den Eigenschafts-Schlüssel-Wert-Paaren, die zum Festlegen der .css()-Methode verwendet werden, mit der Ausnahme, dass der Eigenschaftsbereich stärker eingeschränkt ist. Der zweite Parameter kann nun einzeln oder kombiniert in einem Objekt übergeben werden.

Parameterzerlegung:

Eigenschaften: ein Objektobjekt, das aus Schlüssel-Wert-Paaren einer oder mehrerer CSS-Eigenschaften besteht. Es ist wichtig zu beachten, dass alle für die Animation verwendeten Eigenschaften numerisch sein müssen, sofern nicht anders angegeben. Diese Eigenschaften können die grundlegende jQuery-Funktionalität nicht nutzen, wenn sie nicht numerisch sind. Beispielsweise können die allgemeinen Begriffe „Rand“, „Rand“, „Auffüllung“, „Breite“, „Höhe“, „Schriftart“, „Links“, „Oben“, „Rechts“, „Unten“, „WordSpacing“ usw. alle Animationseffekte erzeugen. Hintergrundfarbe ist offensichtlich nicht möglich, da der Parameter ein Wert wie Rot oder GBG ist, was für Plug-Ins sehr nützlich ist, da sonst der Animationseffekt unter normalen Umständen nicht erzielt werden kann. Beachten Sie, dass CSS-Stile mithilfe von DOM-Namen (z. B. „fontSize“) und nicht mithilfe von CSS-Namen (z. B. „font-size“) festgelegt werden.

Achten Sie besonders auf die Einheit, die Einheit des Attributwerts ist Pixel (px), sofern nicht anders angegeben. Die Einheiten em und % müssen mit

.animate({
left: ,
width: 'px'
opacity: 'show',
fontSize: "em",
}, );

angegeben werden. Zusätzlich zur Definition von Werten kann jedes Attribut „show“, „hide“ und verwenden 'umschalten'. Diese Verknüpfungen ermöglichen benutzerdefinierte Animationen zum Ein- und Ausblenden, um die Anzeige oder das Ausblenden von Elementen zu steuern

.animate({
width: "toggle"
});

Wenn ein Wert bereitgestellt wird, der mit += oder -= beginnt, dann wird der Zielwert berechnet, indem die angegebene Zahl zum aktuellen Wert dieses Attributs addiert oder subtrahiert wird

.animate({
left: '+50px'
}, "slow");

Dauer: Zeit

Die Ausführungszeit der Animation. Die Dauer wird in Millisekunden angegeben. Je größer der Wert, desto langsamer und nicht schneller. Es ist auch möglich, „schnelle“ und „langsame“ Zeichenfolgen bereitzustellen, die eine Dauer von 200 bzw. 600 Millisekunden angeben.
Algorithmus zur Erleichterung der Animationsbewegung:

Die jQuery-Bibliothek ist die Standardeinstellung beim Aufruf von Swing. Wenn Sie andere Animationsalgorithmen benötigen, suchen Sie bitte nach entsprechenden Plug-ins

vollständiger Rückruf

Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist Die aktuelle Animation wird ermittelt. Nach Abschluss wird die Methode

02.animate() ausgelöst, um mehrere Animationen nacheinander auszuführen.

animate Wenn Sie die Animation ausführen, müssen Sie einige Ausführungen beobachten Bedingungen der Animation oder während der Animation Um zu einem bestimmten Zeitpunkt eine andere Verarbeitung durchzuführen, können wir animate verwenden, um eine zweite Einstellungssyntax bereitzustellen, einen Objektparameter zu übergeben und einige Benachrichtigungen über den Ausführungsstatus der Animation zu erhalten.

.animate( Eigenschaften, Optionen)

Optionsparameter

Dauer – Legen Sie die Ausführungszeit der Animation fest.
Beschleunigung – Geben Sie die zu verwendende Beschleunigungsfunktion an, zu der der Übergang führt Beschleunigungsfunktion verwenden
Schritt: legt die Funktion fest, die ausgeführt werden soll, nachdem jeder Schritt jeder Animation abgeschlossen ist
Fortschritt: Dieser Rückruf wird jedes Mal ausgeführt, wenn die Animation aufgerufen wird, was ein Fortschrittskonzept ist
vollständig: Rückruf, wenn die Animation abgeschlossen ist

Wenn mehrere Elemente animiert werden, wird der Rückruf einmal für jedes passende Element ausgeführt, nicht einmal für die gesamte Animation

Gemeinsame Methoden auflisten

$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: ,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after(&#39;<div>Animation complete.</div>&#39;);
}
});

Rufen Sie die animate()-Methode auf, um einen benutzerdefinierten Animationseffekt zu erstellen. Das Aufrufformat lautet:

$(selector).animate({params},speed , [Rückruf])

Unter diesen ist der Parameter params der Name und der Wert der CSS-Eigenschaft, die zum Erstellen des Animationseffekts verwendet wird, und der Parameter speed ist die Geschwindigkeit des Animationseffekts in Millisekunden. und der optionale Rückrufparameter wird ausgeführt, wenn die Animation abgeschlossen ist. Der Name der Rückruffunktion.

Rufen Sie beispielsweise die animate()-Methode auf, um das Bild mit einem Animationseffekt von klein nach groß anzuzeigen, wie unten gezeigt:

<body>
<h>制作简单的动画效果</h>
<img src="images/.png" alt=""/>
<div id="tip"></div>
<script type="text/javascript">
$(function() {
$(&#39;img&#39;).animate({
width: &#39;px&#39;;
height:&#39;px&#39;
}, , function() {
$("#tip").html(&#39;执行完成！&#39;);
});
})
</script>
</body>

Der im Browser angezeigte Effekt:

Wie auf dem Bild zu sehen ist, wird die animate()-Methode aufgerufen, um das Bildelement mit einer sich allmählich vergrößernden Animation anzuzeigen Wenn die Animation abgeschlossen ist, werden die Worte „Ausführung abgeschlossen!“ im