Heim > Web-Frontend > js-Tutorial > Hauptteil

Tutorial zur JavaScript-Verbesserung – jQuery-Animation

黄舟
Freigeben: 2017-01-21 16:03:19
Original
1217 Leute haben es durchsucht

jQuery-Animation – animate()-Methode

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

Syntax:

$(selector).animate({params},speed,callback);
Nach dem Login kopieren

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

-Element nach links, bis das linke Attribut 250 Pixel beträgt:

Beispiel

$("button").click(function(){ $("div").animate({left:'250px'}); });
Nach dem Login kopieren
<!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>
Nach dem Login kopieren

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


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage