簡(jiǎn)單談?wù)凱HP vs Node.js
805
2023-12-08
本文實(shí)例講述了jQuery實(shí)現(xiàn)連續(xù)動(dòng)畫(huà)效果的方法。分享給大家供大家參考。具體如下：
這里介紹jQuery實(shí)現(xiàn)一連串的連續(xù)動(dòng)畫(huà)效果，將這些動(dòng)畫(huà)運(yùn)用先設(shè)置好，然后在jQuery的作用下完成一個(gè)接一個(gè)的動(dòng)畫(huà)，這在網(wǎng)頁(yè)游戲編寫(xiě)中是個(gè)基礎(chǔ)但重要的動(dòng)畫(huà)生成技巧，對(duì)于前臺(tái)設(shè)計(jì)來(lái)說(shuō)也是有必要掌握的。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.gimoo.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ù)的動(dòng)畫(huà)效果</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="http://www.gimoo.net/t/1905/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)前動(dòng)畫(huà)，繼續(xù)下一個(gè)動(dòng)畫(huà)
});
$("button:eq(2)").click(function () {
$("#panel").stop(true);//清除元素的所有動(dòng)畫(huà)
});
$("button:eq(3)").click(function () {
$("#panel").stop(false,true);//讓當(dāng)前動(dòng)畫(huà)直接到達(dá)末狀態(tài) ，繼續(xù)下一個(gè)動(dòng)畫(huà)
});
$("button:eq(4)").click(function () {
$("#panel").stop(true,true);//清除元素的所有動(dòng)畫(huà)，讓當(dāng)前動(dòng)畫(huà)直接到達(dá)末狀態(tài)
});
})
</script>
</head>
<body>
<button>開(kāi)始一連串動(dòng)畫(huà)</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之后又一個(gè)優(yōu)秀的JavaScript庫(kù)，它是一個(gè)由 John Resig 創(chuàng)建于2006年1月的開(kāi)源項(xiàng)目。jQuery憑借簡(jiǎn)潔的語(yǔ)法和跨平臺(tái)的兼容性，極大地簡(jiǎn)化了JavaScript開(kāi)發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動(dòng)畫(huà)和開(kāi)發(fā)Ajax。它獨(dú)特而又優(yōu)雅的代碼風(fēng)格改變了JavaScript程序員的設(shè)計(jì)思路和編寫(xiě)程序的方式。
</div>
</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
