jQuery 效果

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);
});