jQuery 效果 (Effects)

JavaScript 應用在客戶端網頁上最強悍的用途之一就是動態效果了，往往利用純 JavaScript 作一個效果你可能要寫好幾行的 Code，而 Jquery Effects 幫你把許多常會用到的特效包起來，現在你只需要寫個幾行 Code 來作事。(更多請看 jQuery UI)

基本的 (Basics)

show()、show(speed,[callback])

show() － 顯示出隱藏的元素 
HTML
<p style="display: none">Hello</p>
jQuery
$("p").show();
show(speed,[callback]) － 多了動畫效果，且可在開關完畢後執行一函式 
HTML
<p style="display: none">Hello</p>
jQuery
$("p").show(5000);
函式說明：
參數 型別 說明
speed String,Number 三種預定的速度("slow", "normal", "fast")，或
動畫間隔的毫秒數值(如一秒、1000).
callback Function 每個元素在完成動畫後要執行的函數
function callback() {this; //dom element}

hide()、hide(speed,[callback])

隱藏顯示的元素，相對於 show 函式，用法一樣。

toggle()

輪流切換顯示/隱藏狀態。

滑動 (Sliding)

相對於show、hide，slideDown、slideUp是以滑動的效果來顯示/隱藏元素。

slideDown(speed,[callback])

以滑下的特效來顯示元素，參數同 show。 
HTML
<p style="display: none">Hello</p>
jQuery
$("p").slideDown(5000);

slideUp(speed,[callback])

以滑上的特效來隱藏元素，參數同 show。 
HTML
<p style="display: none">Hello</p>
jQuery
$("p").slideUp(5000);

slideToggle(speed,[callback])

輪流切換顯示/隱藏狀態。

淡入淡出 (Fading)

以淡入淡出的效果來顯示/隱藏元素。

fadeIn(speed,[callback])

以淡入的特效來顯示元素，參數同 show。 
HTML
<p style="display: none">Hello</p>
jQuery
$("p").fadeIn(5000);

fadeOut(speed,[callback])

以淡出的特效來隱藏元素，參數同 show。 
HTML
<p style="display: none">Hello</p>
jQuery
$("p").fadeOut(5000);

fadeTo(speed,opacity,[callback])

動態漸變調整元素透明度，且可在開關完畢後執行一函式。(寬高不變) 
opacity(Number)：不透明度值0~1
HTML
<p style="display: none">Hello</p>
jQuery
$("p").fadeTo("slow", 0.33);
這是特效 Demo
這是特效 Demo
這是特效 Demo

自己設定 (Custom)

animate(params[,duration[,easing[,callback]]])

animate 這個函式可以讓你自行定義動態效果，其參數分別為：
參數 型別 說明
params Options 一組包含最終CSS樣式的{屬性:值}
duration String,Number 三種預定的速度("slow", "normal", "fast")，或
動畫間隔的毫秒數值(如一秒、1000)
easing String 緩和方式，預設是 linear 線性，還有 swing 可選
callback Function 每個元素在完成動畫後要執行的函數 
$("#go").click(function(){
  $("#block").animate({ 
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em", 
    borderWidth: "10px"
  }, 1500 );
});
Hello!
animate只支援「可數字化」的屬性，如height、width、left、top、opacity等。
你可以在屬性值前面指定「+=」或「-=」來做相對運動。
$("#go").click(function(){
  $(".block").animate({left: '+=100px'}, 2000);
});