JQ總務處｜jQuery特效與動畫｜深入淺出jQuery

前言

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

（ 圖片來源 ）

顯示 / 隱藏效果

利用 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 可以在一段時間後再重複一次。

1. 名為 t 的定時參數，在這把值放進來並在下面使用它。
2. setTimeout 告訴 JS 直譯器執行函式，然後於再次執行它前先等待一段時間。
3. 告訴 JS 直譯器你想要函式一再地呼叫它自己。
4. 暫停期間，單位為毫秒。

// 所以最後在原括號裡加入參數，它就會傳遞給 setTimeout ，藉此產生出淡入、淡出的閃爍效果
lightning_one(4000);

function lightning_one(t){
    $("#lightning1").fadeIn(250).fadeOut(250);
    setTimeout("lightning_one()",t);
}

動畫效果

藉由 animate 方法，可以動態改變及產生很多特效，但也還是有一些限制，它只能處理使用數字作設定的 CSS 屬性，例如：

1. borders / margin / padding
2. element height / min-height / max-height
3. element width / min-width / max-width
4. font size
5. bottom / left / right / top position
6. background position
7. letter spacing / word spacing
8. text indent
9. 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 著、楊仁和 譯 ）