Analisis contoh kesan animasi berterusan yang dicapai dengan jQuery

Analisis contoh kesan animasi berterusan yang dicapai dengan jQuery_jquery

WBOY

Lepaskan： 2016-05-16 15:37:07

asal

1161 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery boleh mencapai kesan animasi berterusan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kami memperkenalkan jQuery untuk merealisasikan satu siri kesan animasi berterusan ini disediakan terlebih dahulu, dan kemudian animasi disiapkan satu demi satu di bawah pengaruh jQuery Ini adalah kemahiran penjanaan animasi asas tetapi penting dalam web penulisan permainan. Untuk Ia juga perlu menguasai reka bentuk meja depan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.