jquery动画 -- 1.加载指示器
該系列文章是我閱讀《jQuery 1.4 Animation Techniques》后的總結，有興趣的朋友可以去看原版書籍。
動畫效果對于豐富網站的交互體驗起到了不可或缺的作用，他可以讓你的站點更酷，更吸引人。
?
什么時候使用動畫：
1.當顯示或隱藏頁面、彈出框或內容區域的時候；
2.當一些內容從頁面的一個地方移動到其他地方的時候；
3.當頁面中的一些內容，應用戶的操作而產生狀態改變的時候；
4.當一些內容在幾種狀態間轉變的時候；
5.引導用戶去執行某些操作，或者引起他們對某些很重要信息注意的時候。
?
什么時候不應使用動畫：
1.當某些操作是需要用戶頻繁重復操作的時候；
2.當設備無法充分顯示動畫效果的時候（也就是說該動畫會占用計算機的很多資源，會影響到性能）；
3.即時操作。
?
當然這些規定都不是絕對的，你需要根據你的實際情況來決定是否使用動畫。下面是一些checklist（驗證列表），只要滿足下面幾條選項，你的動畫就是有價值的。
1.動畫是否適合你的目標客戶；
2.動畫是否實用；
3.動畫是否增強了用戶體驗；
4.動畫是否以合適的速度運行。
?
下面我們開始我們的第一個例子，創建一個動畫加載指示器。
我直接把源碼貼出來，上面有注釋。
<!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 () {//創建loader div對象//這里使用jQueryjQuery(html,[ownerDocument])方法，不懂得朋友去看下apivar loader = $("<div></div>", {id: 'loader'}).css('display', 'none');//創建顯示條var bar = $('<span></span>').css('opacity', 0.2);//時間間隔對象var loadingInterval = null;//創建三個顯示條，并添加到loader對象中for (var i = 0; i < 3; 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);});});</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>
demo下載：jQuery.animation.loader.zip
轉載于:https://www.cnblogs.com/softlover/archive/2012/08/15/2639881.html
總結
以上是生活随笔為你收集整理的jquery动画 -- 1.加载指示器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 推荐系统学习(一)--电影推荐系统搭建
- 下一篇： Axure最新激活码