本文實例講述了jQuery實現連續動畫效果的方法。分享給大家供大家參考。具體如下：
這里介紹jQuery實現一連串的連續動畫效果，將這些動畫運用先設置好，然后在jQuery的作用下完成一個接一個的動畫，這在網頁游戲編寫中是個基礎但重要的動畫生成技巧，對于前臺設計來說也是有必要掌握的。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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實現連續的動畫效果</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?</h5> <div class="content"> jQuery是繼Prototype之后又一個優秀的JavaScript庫，它是一個由 John Resig 創建于2006年1月的開源項目。jQuery憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。 </div></div></body></html>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
