基於jquery的動畫效果代碼_jquery

jquery動畫
有趣的地方見效果圖：

思想：
將圖片設定分割div的背景圖片，控制div的屬性，可以現實有趣的濾鏡效果，本例中展示了一種，有興趣的朋友可以嘗試其他濾鏡的實作。
本例其餘動畫部分，主要利用jquery中提供animate和delay實作。
animate：這個函數的關鍵在於指定動畫形式及結果樣式屬性物件。這個物件中每個屬性都表示一個可以變化的樣式屬性。
delay：設定一個延遲來延遲執行佇列中之後的項目。
實例效果：

<title>jquery 動畫</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> *{margin: 0px;padding: 0px;} #test{width:300px; height: 300px; position: relative; margin: 20px auto 0px;} </style> <div id="test"> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201207/20120725224206212.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="" style="max-width:90%" style="max-width:90%"> </div>
[Ctrl A 全選 註:

如需引入外部Js需刷新才能執行]