Ausführliche Erläuterung der Anwendungsbeispiele für die Funktion jQuery.animate()

Die Funktion

animate() wird verwendet, um eine benutzerdefinierte Animation basierend auf CSS-Attributen durchzuführen.

Sie können CSS-Stile für passende Elemente festlegen und die Funktion animate() führt eine Übergangsanimation vom aktuellen Stil zum angegebenen CSS-Stil durch.

Zum Beispiel: Die aktuelle Höhe eines div-Elements beträgt 100 Pixel und seine CSS-Höheneigenschaft ist auf 200 Pixel eingestellt. animate() führt eine Übergangsanimation aus, die die Höhe des div-Elements schrittweise von 100 Pixel auf 200 Pixel erhöht .

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

Diese Funktion ist neu in jQuery 1.0. Die animate()-Funktion hat hauptsächlich die folgenden zwei Verwendungsformen:

Verwendung 1:

jQueryObject.animate( cssProperties [, Dauer ] [, Easing ] [, vollständig ] )

Verwendung 2:

jQueryObject.animate( cssProperties, Optionen)

Verwendung 2 ist eine Variation der Verwendung 1. Geben Sie die erforderlichen Optionsparameter in Objektform an (Sie können mehr Optionsparameter als Verwendung 1 angeben).

Parameter

Parameterbeschreibung

cssProperties ObjektklasseEin Objektobjekt.

Dauer Optional/String/Number-Typ gibt an, wie lange die Animation läuft (Anzahl in Millisekunden), der Standardwert ist 400. Dieser Parameter kann auch

string„schnell“ (=200) oder „langsam“ (=600) sein.

easing Optional/String-Typ gibt an, welcher Animationseffekt verwendet werden soll. Der Standardwert ist „Swing“ und kann auch auf „linear“ oder andere benutzerdefinierte Animationsstilfunktionen eingestellt werden.

Das vollständige Element vom Typ „Optional/Funktion“ muss ausgeführt werden, nachdem die Funktion angezeigt wurde. Dies innerhalb der Funktion zeigt auf das aktuelle DOM-Element.

Optionsparameterobjekt, das durch den Optionsobjekttyp angegeben wird.

Das Parameteroptionsobjekt kann die folgenden Attribute identifizieren (die folgenden Attribute sind optional):

Attributattributbeschreibung

Dauer Siehe Parameterdauer.

Easing Siehe Parameter Easing.

vollständig Siehe Parameter abgeschlossen.

queue Der boolesche Typ gibt an, ob die Animation in die Effektwarteschlange gestellt werden soll. Der Standardwert ist true. Ab Version 1.7 kann dieser Parameter eine Zeichenfolge sein, die zum Einfügen in die Effektwarteschlange mit dem angegebenen Namen verwendet wird. Wenn die von Ihnen angegebene Warteschlange nicht automatisch startet, müssen Sie dequeue("queueName") manuell aufrufen, um die Warteschlange zu starten.

Darüber hinaus haben jQuery 1.4 und 1.8 auch viele neue Optionsunterstützungen für Parameteroptionen hinzugefügt, diese Parameter werden jedoch nicht häufig verwendet und werden hier nicht beschrieben. Weitere Informationen finden Sie in der offiziellen Dokumentation von jQuery.

Rückgabewert

animate()

Der Rückgabewert der Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiel und Beschreibung

Mit Ausnahme der unten genannten Werte sollten alle animierten CSS-Eigenschaften in einen einzelnen Wert geändert werden können. Bei Verwendung der grundlegenden jQuery-Funktionalität können die meisten nicht numerischen CSS-Eigenschaften nicht zum Ausführen von Animationen verwendet werden. Zum Beispiel: Breite, Höhe, links, oben können alle für Animationen verwendet werden, aber Farbe,

Hintergrundfarbe kann nicht für Animationen verwendet werden (es sei denn, das Plug-In jQuery.Color() wird verwendet). Sofern Sie keine Einheit für den Attributwert angeben (z. B. px, em, %), ist die Standardwerteinheit Pixel (px).

Die abgekürzten CSS-Attribute wie Rahmen, Rand usw. werden möglicherweise nicht vollständig unterstützt, daher wird ihre Verwendung nicht empfohlen.

Sie können den CSS-Attributwert auch auf bestimmte Zeichenfolgen festlegen, z. B. „Anzeigen“, „Ausblenden“, „Umschalten“. JQuery ruft dann die Standardanimationsform dieses Attributs auf.

Darüber hinaus können CSS-Attributwerte auch relativ sein. Sie können dem Attributwert „+=" oder „-=" voranstellen, um den angegebenen Wert gegenüber dem ursprünglichen Attributwert zu erhöhen oder zu verringern. Beispiel: { „height“: „+=100px“ } bedeutet, dass der ursprünglichen Höhe 100 Pixel hinzugefügt werden.

Bitte beachten Sie den folgenden anfänglichen HTML-Code:

a8dd71fc29d112c025bfe5e53c348f7b CodePlayer16b28748ea4df4d9c2150843fecfba68

Animationseffekt:

<select id="animation">
    <option value="1">动画1</option>
    <option value="2">动画2</option>
    <option value="3">动画3</option>
    <option value="4">动画4</option>
    <option value="5">动画5</option>
</select>
<input id="exec" type="button" value="执行动画" >

Das Folgende ist der jQuery-Beispielcode für die Funktion animate(), um die spezifische Verwendung der Funktion animate() zu demonstrieren:

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele für die Funktion jQuery.animate(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!