前言
接下來會學習如何讓元素在你的頁面上產生過度效果，而且全都可以在你眼前實實在在發生，所以請睜大你的雙眼，你將會看到如何排程這些動態變化，好讓它們在不同時段發生，並讓頁面具有動態感。
（ 圖片來源 ）
顯示 / 隱藏效果
利用 show 、 hide 、 toggle 效果來控制 HTML 元素的 顯示 / 隱藏效果。
| 名稱 | 介紹 | 範例 |
|---|---|---|
| hide | 隱藏該元素。 |  |
| show | 顯示該元素。 |  |
| toggle | 顯示切換效果指的是「 如果現在是顯示就改成隱藏，反之隱藏就改成顯示。 」 |  |
滑動效果
利用 slide 效果來控制 HTML 元素的 height （ 高度 ）性質。
| 名稱 | 介紹 | 範例 |
|---|---|---|
| slideUp | 滑上效果是改變元素的 height 性質，直到它變成 0 ，接著隱藏該元素。 |  |
| slideDown | 滑下效果是改變元素的 height 性質，從 0 到它在 CSS 樣式中所設定的大小。 |  |
| slideToggle | 滑動切換效果指的是「 如果現在是滑上就改成滑下，反之滑下就改成滑上。 」 |  |
目前 jQuery 只包括滑上、滑下的現成特效，那如果要滑左、滑右怎麼辦呢？
放心，先賣個關子，等等就會出現了！
淡入 / 淡出效果
利用 fade 效果來控制 HTML 元素的 opacity （ 不透明 ）和 transparency （ 透明 ）性質。
| 名稱 | 介紹 | 範例 |
|---|---|---|
| fadeIn | 淡入已隱藏的元素 |  |
| fadeOut | 淡出可見元素 |  |
| fadeToggle | 淡化切換效果指的是「 如果現在元素是可見的淡出，反之隱藏的就淡入。 」 |  |
| fadeTo | 淡化成賦予給元素的不透明度（ 值介於 0 與 1 之間 ） |  |
為特效加入時間
時間參數可以使用 fast 、 normal 、 slow 以及毫秒，如果沒填寫的話，特效就會按照正常速度（ 400毫秒 ）完成。
$(".myElement").fadeIn("fast");
$(".myElement").fadeIn("normal");
$(".myElement").fadeIn("slow");
$(".myElement").fadeIn(1000); // 1秒=1000毫秒
定時函數
使用 setTimeout 可以在一段時間後再重複一次。
- 名為 t 的定時參數，在這把值放進來並在下面使用它。
- setTimeout 告訴 JS 直譯器執行函式，然後於再次執行它前先等待一段時間。
- 告訴 JS 直譯器你想要函式一再地呼叫它自己。
- 暫停期間，單位為毫秒。
// 所以最後在原括號裡加入參數，它就會傳遞給 setTimeout ，藉此產生出淡入、淡出的閃爍效果
lightning_one(4000);
function lightning_one(t){
$("#lightning1").fadeIn(250).fadeOut(250);
setTimeout("lightning_one()",t);
}
動畫效果
藉由 animate 方法，可以動態改變及產生很多特效，但也還是有一些限制，它只能處理使用數字作設定的 CSS 屬性，例如：
- 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"});
如果我想讓使用者能關閉動畫的話該怎麼做？
可以設計一個點擊按鈕連結到像 $.fx.off = true; 的程式碼，另一個為 jQuery 的 stop 方法。
可以在 jQuery 的網站上找到更詳細的資料： jQuery.fx.off 、 stop
參考資料
深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）
