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

基本效果 (Basics)

.show()：顯示效果

.hide()：隱藏效果

.toggle()：輪流切換顯示/隱藏狀態


.show()
.show( [speed ] [, callback  ] )
.show( options )
.show( [speed ] [, easing ] [, callback  ] )

speed ：A string or number determining how long the animation will run. (default: 400)
easing ：A string indicating which easing function to use for the transition. (default: swing)
callback ：A function to call once the animation is complete.


    $("#hideshow").click(
        function () {
            var isvisible = $("#Img1").is(":visible");
            if (isvisible)
                $("#Img1").hide();
            else
                $("#Img1").show();
        }
    ); 

    $("#toggle").click(
        function () {
            $("#Img2").toggle('slow');
        }
    );

執行特效時常用的方法

.delay()：delay to the method

jQuery.fx.off：Turns off all jQuery effects for the page.

.stop()：Stop the currently-running animation on the matched elements.

滑動 (Sliding)

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

.slideDown()：以滑下的特效來顯示元素，參數同 show。

.slideUp()：以滑上的特效來隱藏元素，參數同 show。

.slideToggle()：輪流切換顯示/隱藏狀態。


    $("#sliding").click(
        function () {
            var isvisible = $("#Img3").is(":visible");
            if (isvisible)
                $("#Img3").slideUp();
            else
                $("#Img3").slideDown();
        }
    ); 

    $("#slideToggle").click(
        function () {
            $("#Img4").slideToggle('slow');
        }
    );

淡入淡出 (Fading)

相對於 show、hide 方法，fadeIn、fadeOut 則是以淡入淡出的效果來顯示/隱藏元素。

.fadeIn()：以淡入的特效來顯示元素，參數同 show。

.fadeOut()：以淡出的特效來隱藏元素，參數同 show。

.fadeTo()：動態漸變調整元素透明度，且可在開關完畢後執行一函式。(寬高不變)


    $("#fadeInOut").click(
        function () {
            var isvisible = $("#Img5").is(":visible");
            if (isvisible)
                $("#Img5").fadeOut(1000);   //隱藏
            else
                $("#Img5").fadeIn(1000);    //顯示
        }
    ); 

    $("#Img6").css("display", "none");
    $("#fadeTo").click(
        function () {
            $("#Img6").fadeTo("slow", 0.33);
        }
    );

自己設定 (Custom)

.animate()：


.animate( properties, options )
.animate( properties [, duration ] [, easing ] [, callback ] )

animate 這個函式可以讓你自行定義動態效果，其參數分別為：

properties ：一組包含最終CSS樣式的{屬性:值}
duration ：三種預定的速度("slow", "normal", "fast")，或動畫間隔的毫秒數值(如：1000)
easing ：緩和方式 { linear | swing }
callback ：每個元素在完成動畫後要執行的函數


$("#go").click(function(){
    $("#block").animate(
        { width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 
        1500
        );
});

animate只支援「可數字化」的屬性，如height、width、left、top、opacity等。

你可以在屬性值前面指定「+=」或「-=」來做相對運動。


$("#go").click(function(){
  $(".block").animate({left: '+=100px'}, 2000);
});