接下來會學習如何讓元素在你的頁面上產生過度效果，而且全都可以在你眼前實實在在發生，所以請睜大你的雙眼，你將會看到如何排程這些動態變化，好讓它們在不同時段發生，並讓頁面具有動態感。

（ 圖片來源 ）

顯示 / 隱藏效果

利用 show 、 hide 、 toggle 效果來控制 HTML 元素的 顯示 / 隱藏效果。

為特效加入時間

時間參數可以使用 fast 、 normal 、 slow 以及毫秒，如果沒填寫的話，特效就會按照正常速度（ 400毫秒 ）完成。

$(".myElement").fadeIn("fast");
$(".myElement").fadeIn("normal");
$(".myElement").fadeIn("slow");
$(".myElement").fadeIn(1000); // 1秒=1000毫秒
名為 t 的定時參數，在這把值放進來並在下面使用它。
setTimeout 告訴 JS 直譯器執行函式，然後於再次執行它前先等待一段時間。
告訴 JS 直譯器你想要函式一再地呼叫它自己。
暫停期間，單位為毫秒。
// 所以最後在原括號裡加入參數，它就會傳遞給 setTimeout ，藉此產生出淡入、淡出的閃爍效果
lightning_one(4000);
function lightning_one(t){
    $("#lightning1").fadeIn(250).fadeOut(250);
    setTimeout("lightning_one()",t);
borders / margin / padding
element height / min-height / max-height
element width / min-width / max-width
font size
bottom / left / right / top position
background position
letter spacing / word spacing
text indent
line height
$("#myElement").animate({left:"100px"},500);
animate 的第一個參數讓你選擇想動態改變的 CSS 性質；而第二個是以毫秒表示期間，讓你控制要多久時間完成動態的改變，第一個參數為必填，第二個選填。
而當然它也能同時改變被選擇元素的多個 CSS 性質。
$("#myElement").animate({
    opacity: 0,
    width: "200",
    height: "800"
},5000);
CSS 性質的參數必須用 DOM 標準來設定而不是 CSS 標準。
寫太多也是看得頭昏腦脹，不如直接舉例吧！
以 CSS 表達式設定 div 寬度如下：
div {
    border-style: solid;
    border-width: 5px;
但如果你想動態改變邊界寬度的話，在 jQuery 裡需使用 DOM 表達式如下：
$("div").animate({borderWidth:30,"slow"});
注意到了嗎？ CSS 裡的 border-width 在 DOM 表達式下寫成 borderWidth 。
使用運算子組合
在每次 animate 方法被呼叫時，有一些特別的 JavaScript 運算子以相同的移動量來移動元素，這些運算子被稱作指定運算子（ assignment operator ），因為它們通常被用來將值指定給變數。依此方式，變數也可以將新值增加到它的當前值內，是不是聽起來很繞口？想說到底是在供殺小，對！我也是這麼想哈哈哈！其實實際展示出來就還好了。
a = 20

等號運算子將值 20 指定給變數 a 。
a += 20

加號與等號運算子的組合代表 a=a+20 ，即 a 的當前值加上 20 並將運算結果再指定給 a 。
a -= 20

減號與等號運算子的組合代表 a=a-20 ，即 a 的當前值減掉 20 並將運算結果再指定給 a 。
a *= 20

乘號與等號運算子的組合代表 a=a×20 ，即 a 的當前值乘以 20 並將運算結果再指定給 a 。
a /= 20

除號與等號運算子的組合代表 a=a÷20 ，即 a 的當前值除以 20 並將運算結果再指定給 a 。
所以下面這段意思就是每次 animate 方法被呼叫時， #box 會移動 20 個像素。
$("#box").animate({left:"+=20"});