suchen

Heim >Web-Frontend >js-Tutorial >Analyse von Beispielen kontinuierlicher Animationseffekte, die mit jQuery_jquery erzielt wurden

Analyse von Beispielen kontinuierlicher Animationseffekte, die mit jQuery_jquery erzielt wurden

WBOY
WBOYOriginal
2016-05-16 15:37:071168Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery kontinuierliche Animationseffekte erzielen kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier stellen wir jQuery vor, um eine Reihe kontinuierlicher Animationseffekte zu realisieren, und dann werden die Animationen nacheinander unter dem Einfluss von jQuery fertiggestellt. Dies ist eine grundlegende, aber wichtige Fähigkeit zur Animationsgenerierung Für das Schreiben von Spielen ist es auch notwendig, das Front-Desk-Design zu beherrschen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-lx-animate-style-demo/

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>jQuery实现连续的动画效果</title>
<style type="text/css">
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}
.head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
  $("button:eq(0)").click(function () {
   $("#panel")
   .animate({height : "150" } , 1000 )
   .animate({width : "300" } , 1000 )
   .hide(2000)
   .animate({height : "show" , width : "show" , opacity : "show" } , 1000 )
   .animate({height : "500"} , 1000 );
  });
  $("button:eq(1)").click(function () {
   $("#panel").stop();//停止当前动画，继续下一个动画
  });
  $("button:eq(2)").click(function () {
   $("#panel").stop(true);//清除元素的所有动画
  });
  $("button:eq(3)").click(function () {
   $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画
  });
  $("button:eq(4)").click(function () {
   $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态 
  });
})
</script>
</head>
<body>
 <button>开始一连串动画</button>
 <button>stop()</button>
 <button>stop(true)</button>
 <button>stop(false,true)</button>
 <button>stop(true,true)</button>
<div id="panel">
 <h5 class="head">什么是jQuery&#63;</h5>
 <div class="content">
  jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
 </div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung 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：Clipboard.js erfordert kein Flash und ist nicht auf eine JS-Bibliothek angewiesen, um Fähigkeiten zum Kopieren und Schneiden von Texten zu realisierenNächster Artikel：Clipboard.js erfordert kein Flash und ist nicht auf eine JS-Bibliothek angewiesen, um Fähigkeiten zum Kopieren und Schneiden von Texten zu realisieren

In Verbindung stehende Artikel

Mehr sehen