suchen

Heim >Web-Frontend >js-Tutorial >Implementieren Sie Seitenanimationseffekte über JQuery (Beispielcode)

Implementieren Sie Seitenanimationseffekte über JQuery (Beispielcode)

高洛峰
高洛峰Original
2016-12-28 10:35:051337Durchsuche

Es gibt viele Funktionen, mit denen Animationseffekte erzielt werden können, wobei die Animationsfunktion eine der häufigsten Funktionen ist. Im Folgenden finden Sie eine kurze Einführung in die Verwendung dieser Funktion.

Grundform der Animate-Funktion

Die Grundform des durch Animate erzielten Animationseffekts ist:

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

Unter diesen ist {params} ein erforderliches Element, das den CSS-Stil angibt, den das angegebene Element haben soll, nachdem es den Animationseffekt durchlaufen hat , und Geschwindigkeit gibt die Geschwindigkeit an, mit der die Animation ausgeführt wird. Der Wert kann ein numerischer Typ sein (z. B. 1000 bedeutet, dass die Animation innerhalb von 1 Sekunde in den durch params angegebenen Stil wechselt), langsam oder schnell. Callback gibt die Funktion an, die nach Ende der Animation ausgeführt werden soll.

Codebeispiel: 

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:&#39;250px&#39;,
   opacity:&#39;0.5&#39;,
   height:&#39;150px&#39;,
   width:&#39;150px&#39;
  });
 });
});
</script> 
</head>
  
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
 
</body>
</html>

Mehrfachzuweisungsformulare für Variablen im {params}-Objekt

Über die Variablen im {params}-Objekt können Sie Werte zuweisen ​​im folgenden Formular.

Absolutwertform

Das oben angegebene Codebeispiel dient der Zuweisung des Parameterobjekts in der Absolutwertform

Relativwertform

Zum Beispiel Sagen Sie zu Fügen Sie „+“, „-“ usw. vor dem Variablenwert hinzu.

Codebeispiel: 

<script> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:&#39;250px&#39;,
   height:&#39;+=150px&#39;,
   width:&#39;+=150px&#39;
  });
 });
});
</script>

Anzeigen, Ausblenden und Umschalten

Variablenwerte des params-Objekts, wir können auch die oben genannten drei Werte zuweisen, z Der folgende Code besteht darin, den Inhalt des div-Tags verschwinden zu lassen. 

$("button").click(function(){
 $("div").animate({
  height:&#39;toggle&#39;
 });
});

Der obige Artikel über die Realisierung des Animationseffekts der Seite durch JQuery (Beispielcode) ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder wird die chinesische PHP-Website unterstützen.

Weitere verwandte Artikel zu Seitenanimationseffekten (Beispielcode), die durch JQuery erzielt werden, finden Sie auf der chinesischen PHP-Website!

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：Beispielanalyse eines Auslöseereignisses für die Auswahl eines Dropdown-Felds basierend auf jQueryNächster Artikel：Beispielanalyse eines Auslöseereignisses für die Auswahl eines Dropdown-Felds basierend auf jQuery

In Verbindung stehende Artikel

Mehr sehen