jquery animate()-Methode


  Übersetzungsergebnisse:

animieren

Englisch[ˈænɪmeɪt]

vt. animieren; lebendig machen; lebendig;

jquery animate()-MethodeSyntax

Funktion: Die Methode animate() führt benutzerdefinierte Animationen von CSS-Eigenschaftssätzen durch. Diese Methode ändert ein Element mithilfe von CSS-Stilen von einem Zustand in einen anderen. Die Werte der CSS-Eigenschaften ändern sich schrittweise, sodass Sie animierte Effekte erstellen können. Es können nur numerische Werte animiert werden (z. B. „margin:30px“). Zeichenfolgenwerte können nicht animiert werden (z. B. „Hintergrundfarbe: Rot“). Verwenden Sie „+=" oder „-=", um relative Animationen zu erstellen.

Syntax 1: $(selector).animate(styles,speed,easing,callback)

Parameter:

Geschwindigkeit easing Rückruf


Syntax 2:
$(selector).animate(styles,options)

Parameter:

ParameterBeschreibung
styles Erforderlich. . Gibt die CSS-Stile und -Werte an, die Animationseffekte erzeugen.
Optional. Gibt die Geschwindigkeit der Animation an. Der Standardwert ist „normal“. Mögliche Werte: Millisekunden (z. B. 1500) „langsam“ „normal“ „schnell“
Optional. Gibt eine Beschleunigungsfunktion an, die die Animationsgeschwindigkeit an verschiedenen Animationspunkten festlegt. Integrierte Entspannungsfunktionen: Die Swing-Linearverlängerung bietet weitere Entspannungsfunktionen.
Optional. Die Funktion, die ausgeführt werden soll, nachdem die Animationsfunktion ausgeführt wurde.
Optionen

jquery animate()-MethodeBeispiel

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>
Instanz ausführen »

Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen

Parameter Beschreibung
Stile erforderlich. Gibt die CSS-Stile und -Werte an, die Animationseffekte erzeugen (wie oben).
Optional. Gibt zusätzliche Optionen für die Animation an. Mögliche Werte: Geschwindigkeit – legt die Geschwindigkeit der Animation fest. Beschleunigung – gibt die zu verwendende Beschleunigungsfunktion an. Rückruf – gibt die Funktion an, die nach Abschluss der Animation ausgeführt werden soll. Schritt – gibt die Funktion an, die nach Abschluss jedes Schritts der Animation ausgeführt werden soll. Warteschlange – Boolescher Wert. Gibt an, ob die Animation in die Effektwarteschlange gestellt werden soll. Bei „false“ startet die Animation sofort. „specialEasing“ – eine Zuordnung einer oder mehrerer CSS-Eigenschaften aus dem Stilparameter und der entsprechenden Beschleunigungsfunktionen