suchen

Heim >Web-Frontend >js-Tutorial >jQuery verwendet animate, um Animationsverwendungsbeispiele_jquery zu erstellen

jQuery verwendet animate, um Animationsverwendungsbeispiele_jquery zu erstellen

WBOY
WBOYOriginal
2016-05-16 15:46:271607Durchsuche

Das Beispiel in diesem Artikel beschreibt die Verwendung von jQuery zum Erstellen von Animationen mit animate. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Verwendung von animate:

animate( Hash-Parameter, String|NumberJavascript-String oder numerische Wertgeschwindigkeit, String-Easing, Funktionsrückruf (optional) Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist) Funktion zum Erstellen benutzerdefinierter Animationen.

Der Screenshot des laufenden Effekts der Instanz sieht wie folgt aus:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>animate</title> 
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $("a").toggle(function(){
   $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
  },function(){
   $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
  });
});
</script> 
</head> 
<body> 
<a href="#">text</a> 
<div class="stuff">
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。</div>
</body> 
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

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：jQuery implementiert Sternkommentarcode basierend auf ajax_jqueryNächster Artikel：jQuery implementiert Sternkommentarcode basierend auf ajax_jquery

In Verbindung stehende Artikel

Mehr sehen