jquery動畫1.載入指示器_jquery

系列文章是我閱讀《jQuery 1.4 Animation Techniques》後的總結，有興趣的朋友可以去看原版書籍。
　　動畫效果對於豐富網站的互動體驗起到了不可或缺的作用，他可以讓你的網站更酷，更吸引人。

何時使用動畫：
　　1.當顯示或隱藏頁面、彈出框或內容區域的時候；
　　2.當一些內容從頁面的一個地方移動到其他地方的時候；
　　3.當頁面中的一些內容，應使用者的操作而產生狀態改變的時候；
　　4.當某些內容在幾種狀態間轉變的時候；
　　5.引導使用者去執行某位內容在幾種狀態間轉變的時候；
　　5.引導使用者去執行某位內容；些操作，或引起他們對某些很重要資訊注意的時候。

何時不應使用動畫：
　　1. 當某些操作是需要使用者頻繁重複操作的時候；
　　2.當裝置無法充分顯示動畫效果的時候（也就是說該效果動畫會佔用電腦的許多資源，會影響到效能）；
　　3.即時操作。

　　當然這些規定都不是絕對的，你需要根據你的實際情況來決定是否使用動畫。以下是一些checklist（驗證清單），只要滿足下面幾個選項，你的動畫就是有價值的。
　　1.動畫是否適合你的目標客戶；
　　2.動畫是否實用；
　　3.動畫是否增強了使用者體驗；
　　4.動畫是否以適當的速度運行。

　　下面我們開始我們的第一個例子，創建一個動畫載入指示器，我直接把原始碼貼出來，上面有註解。

複製程式碼

代碼如下:

-/html/PUBL "IC DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

", {
id: 'loader'
}).css('display ', 'none');
//建立顯示條
var bar = $('').css('opacity', 0.2);
//時間間隔物件
var loadingInterval = null;
//建立三個顯示條，並加入loader物件
for (var i = 0; i bar.clone( )//使用clone的可以提高效能，不用每次都去重新建立對象，clone比創建來的快
.addClass('bar-' i).appendTo(loader);
}
//將loader加入go按鈕後面
loader.insertAfter('#go');
function runLoader() {
//取得三個顯示條
var firstBar = loader.children( ':first'),
secondBar = loader.children().eq(1),
thirdBar = loader.children(':last');
//分別對三個顯示條執行動畫效果
//總的效果就是依序讓三個顯示條，透明度變成1，再變成0.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)
});
});
});
});
});
});
});
});
};
//對go按鈕設定toggle事件
$('#go').toggle(function () {
//第一次點擊的時候，顯示loader，建立setInterval，每1200毫秒執行一次runLoader
loader.show();
runLoader();
loadingInterval = setInterval(runLoader, 1200);
}, function () {
//再點擊的時候，隱藏loader，刪除setInterval
loader.hide();
clearInterval(loadingInterval);
});
});