快捷導(dǎo)航

jquery動(dòng)畫1.加載指示器

更新時(shí)間：2012年08月24日 10:52:20 作者：

動(dòng)畫效果對(duì)于豐富網(wǎng)站的交互體驗(yàn)起到了不可或缺的作用，他可以讓你的站點(diǎn)更酷，更吸引人

該系列文章是我閱讀《jQuery 1.4 Animation Techniques》后的總結(jié)，有興趣的朋友可以去看原版書籍。
　　動(dòng)畫效果對(duì)于豐富網(wǎng)站的交互體驗(yàn)起到了不可或缺的作用，他可以讓你的站點(diǎn)更酷，更吸引人。

什么時(shí)候使用動(dòng)畫：
　　1.當(dāng)顯示或隱藏頁面、彈出框或內(nèi)容區(qū)域的時(shí)候；
　　2.當(dāng)一些內(nèi)容從頁面的一個(gè)地方移動(dòng)到其他地方的時(shí)候；
　　3.當(dāng)頁面中的一些內(nèi)容，應(yīng)用戶的操作而產(chǎn)生狀態(tài)改變的時(shí)候；
　　4.當(dāng)一些內(nèi)容在幾種狀態(tài)間轉(zhuǎn)變的時(shí)候；
　　5.引導(dǎo)用戶去執(zhí)行某些操作，或者引起他們對(duì)某些很重要信息注意的時(shí)候。

什么時(shí)候不應(yīng)使用動(dòng)畫：
　　1.當(dāng)某些操作是需要用戶頻繁重復(fù)操作的時(shí)候；
　　2.當(dāng)設(shè)備無法充分顯示動(dòng)畫效果的時(shí)候（也就是說該動(dòng)畫會(huì)占用計(jì)算機(jī)的很多資源，會(huì)影響到性能）；
　　3.即時(shí)操作。

　　當(dāng)然這些規(guī)定都不是絕對(duì)的，你需要根據(jù)你的實(shí)際情況來決定是否使用動(dòng)畫。下面是一些checklist（驗(yàn)證列表），只要滿足下面幾條選項(xiàng)，你的動(dòng)畫就是有價(jià)值的。
　　1.動(dòng)畫是否適合你的目標(biāo)客戶；
　　2.動(dòng)畫是否實(shí)用；
　　3.動(dòng)畫是否增強(qiáng)了用戶體驗(yàn)；
　　4.動(dòng)畫是否以合適的速度運(yùn)行。

　　下面我們開始我們的第一個(gè)例子，創(chuàng)建一個(gè)動(dòng)畫加載指示器，我直接把源碼貼出來，上面有注釋。

復(fù)制代碼代碼如下:

 
<!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> 
<title></title> 
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
//創(chuàng)建loader div對(duì)象 
//這里使用jQueryjQuery(html,[ownerDocument])方法，不懂得朋友去看下api 
var loader = $("<div></div>", { 
id: 'loader' 
}).css('display', 'none'); 
//創(chuàng)建顯示條 
var bar = $('<span></span>').css('opacity', 0.2); 
//時(shí)間間隔對(duì)象 
var loadingInterval = null; 
//創(chuàng)建三個(gè)顯示條，并添加到loader對(duì)象中 
for (var i = 0; i < 3; i++) { 
bar.clone()//使用clone的可以提高性能，不用每次都去重新創(chuàng)建對(duì)象，clone比創(chuàng)建來的快 
.addClass('bar-' + i).appendTo(loader); 
} 
//將loader添加到go按鈕后面 
loader.insertAfter('#go'); 
function runLoader() { 
//獲取三個(gè)顯示條 
var firstBar = loader.children(':first'), 
secondBar = loader.children().eq(1), 
thirdBar = loader.children(':last'); 
//分別對(duì)三個(gè)顯示條執(zhí)行動(dòng)畫效果 
//總的效果就是依次讓三個(gè)顯示條，透明度變?yōu)?，再變?yōu)?.2 
firstBar.fadeTo('fast', 1, function () { 
firstBar.fadeTo('fast', 0.2, function () { 
secondBar.fadeTo('fast', 1, function () { 
secondBar.fadeTo('fast', 0.2, function () { 
thirdBar.fadeTo('fast', 1, function () { 
thirdBar.fadeTo('fast', 0.2) 
}); 
}); 
}); 
}); 
}); 
}; 
//對(duì)go按鈕設(shè)置toggle事件 
$('#go').toggle(function () { 
//第一次點(diǎn)擊的時(shí)候，顯示loader，創(chuàng)建setInterval，每1200毫秒執(zhí)行一次runLoader 
loader.show(); 
runLoader(); 
loadingInterval = setInterval(runLoader, 1200); 
}, function () { 
//再次點(diǎn)擊的時(shí)候，隱藏loader，刪除setInterval 
loader.hide(); 
clearInterval(loadingInterval); 
}); 
}); 
</script> 
<style type="text/css"> 
#loader 
{ 
margin: 10px 0 0 36px; 
} 
#loader span 
{ 
display: block; 
width: 6px; 
float: left; 
margin-right: 6px; 
border: 1px solid #336633; 
position: relative; 
background-color: #ccffcc; 
} 
#loader .bar-0 
{ 
height: 15px; 
bottom: -20px; 
} 
#loader .bar-1 
{ 
height: 25px; 
bottom: -10px; 
} 
#loader .bar-2 
{ 
height: 35px; 
margin-right: 0; 
} 
</style> 
</head> 
<body> 
<input id="go" type="button" value="Initiate the action" /> 
</body> 
</html> 