Heim >Web-Frontend >js-Tutorial >Tutorial zur JavaScript-Verbesserung – jQuery-Animation

Tutorial zur JavaScript-Verbesserung – jQuery-Animation

黄舟Original: 2017-01-21 16:03:191260Durchsuche

jQuery-Animation – animate()-Methode

jQuery-animate()-Methode wird zum Erstellen benutzerdefinierter Animationen verwendet.

Syntax:

$(selector).animate({params},speed,callback);

Der erforderliche Parameter params definiert die CSS-Eigenschaften, die die Animation bilden.

Der optionale Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: „langsam“, „schnell“ oder Millisekunden.

Der optionale Callback-Parameter ist der Name der Funktion, die nach Abschluss der Animation ausgeführt werden soll.

Das folgende Beispiel zeigt eine einfache Anwendung der animate()-Methode; sie verschiebt das dc6dce4a544fdca2df29d5ac0ea9906b-Element nach links, bis das linke Attribut 250 Pixel beträgt:

Beispiel

$("button").click(function(){ $("div").animate({left:&#39;250px&#39;}); });

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:&#39;250px&#39;});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

Das Obige ist der Inhalt der JavaScript-Erweiterungs-Tutorial-jQuery-Animation. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tutorial zur JavaScript-Verbesserung – Zusammenfassung der Native.js-BeispieleNächster Artikel：Tutorial zur JavaScript-Verbesserung – Zusammenfassung der Native.js-Beispiele

In Verbindung stehende Artikel

Mehr sehen