快捷導(dǎo)航

jQuery實(shí)現(xiàn)連續(xù)動畫效果實(shí)例分析

更新時間：2015年10月09日 10:35:59 作者：企鵝

這篇文章主要介紹了jQuery實(shí)現(xiàn)連續(xù)動畫效果,實(shí)例分析了animate方法實(shí)現(xiàn)動畫效果的相關(guān)技巧,并備有較為詳盡的注釋供讀者學(xué)習(xí)參考,具有一定參考借鑒價值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)連續(xù)動畫效果的方法。分享給大家供大家參考。具體如下：

這里介紹jQuery實(shí)現(xiàn)一連串的連續(xù)動畫效果，將這些動畫運(yùn)用先設(shè)置好，然后在jQuery的作用下完成一個接一個的動畫，這在網(wǎng)頁游戲編寫中是個基礎(chǔ)但重要的動畫生成技巧，對于前臺設(shè)計(jì)來說也是有必要掌握的。

運(yùn)行效果截圖如下：

在線演示地址如下：

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

具體代碼如下：

<!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實(shí)現(xiàn)連續(xù)的動畫效果</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();//停止當(dāng)前動畫，繼續(xù)下一個動畫
  });
  $("button:eq(2)").click(function () {
   $("#panel").stop(true);//清除元素的所有動畫
  });
  $("button:eq(3)").click(function () {
   $("#panel").stop(false,true);//讓當(dāng)前動畫直接到達(dá)末狀態(tài) ，繼續(xù)下一個動畫
  });
  $("button:eq(4)").click(function () {
   $("#panel").stop(true,true);//清除元素的所有動畫，讓當(dāng)前動畫直接到達(dá)末狀態(tài) 
  });
})
</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?</h5>
 <div class="content">
  jQuery是繼Prototype之后又一個優(yōu)秀的JavaScript庫，它是一個由 John Resig 創(chuàng)建于2006年1月的開源項(xiàng)目。jQuery憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax。它獨(dú)特而又優(yōu)雅的代碼風(fēng)格改變了JavaScript程序員的設(shè)計(jì)思路和編寫程序的方式。
 </div>
</div>
</body>
</html>

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: