上一篇日誌發布了一個企業網站源代碼，這篇日誌主要補充一下 Jquery 的相關知識，Jquery 是一種與 Protype 類似 Js 開發框架，而且很輕量化，深受廣大像 CG 一樣的程序員的喜愛，當然了用 Jquery 寫出動態效果也是小菜一碟以下是 CG 用 jquery 實現的簡單的動態效果，大家看到之後不要覺得 JS 代碼很複雜哦
下面是展示地址 http://www.lidaren.com/code/Jquery/Jquery1.htm
下面是源代碼
$(document).ready(function(){
$("#box").animate({opacity: "0.1", left: "+=600"}, 1200)
.animate({opacity: "1", top: "+=300", height: "170", width: "300"}, "slow")
.animate({opacity: "0.1", left: "0", height: "170", width: "300"}, "slow")
.animate({opacity: "1", top: "0"}, "fast")
.animate({opacity: "1", top: "+=150", left: "+=300", height: "170", width: "300"}, "slow")
.animate({opacity: "0.1", height: "170", width: "300"}, "slow")
.animate({opacity: "1" , height: "170", width: "300"}, "slow")
.animate({opacity: "0.4", height: "170", width: "300"}, "slow")
.animate({opacity: "1", height: "170", width: "300"}, "slow")
.slideUp()
.slideDown("slow")
.animate({opacity: "0.1", height: "170", width: "300"}, "slow")
.animate({opacity: "1" , height: "170", width: "300"}, "slow")
.animate({opacity: "0.4", height: "170", width: "300"}, "slow")
.animate({opacity: "1", height: "170", width: "300"}, "slow")
return false;
});
簡單的解釋一下，Jquery 對 DOM 對象的動態效果是定義了對象的 animate 方法來實現的，animate 方法的參數比較多，第一個參數是對象從 A 狀態到 B 狀態的基本屬性變化值，通常與 CSS 兼容，Jquery 支持表達式計算功能，比如 height:"+=300" 就是高度自增 300，這種方式很方便代碼的編寫，第二個屬性通常是控制變化的效果的，主要可用的值是 fast 和 slow，當然大家也可以用一個整數來表示變化的時間長度，這樣控制更自由一點。下面是 .slideUp () .slideDown () 這兩個方法，效果是卷動效果，參數可以是 fast 和 slow 或者加時間控制，單位是毫秒，其他的還有.hidde () 和.show (), 看意思大家就明白，這裡不詳述