1.隱藏和顯示

語法：

$(selector).hide(speed,callback); 隱藏

$(selector).show(speed,callback);顯示

$(selector).toggle(speed,callback);隱藏顯示進行切換

其中，

speed是隱藏顯示的速度，可取："slow"、"fast" 或毫秒。

callback是隱藏顯示動作完成之後執行的函式。

使用：

$("button").click(function(){
  $("p").hide(1000);
});

2.淡入淡出

四種 fade 方法：

• fadeIn()：$(selector).fadeIn(
  speed,callback);     淡入已隱藏的元素
• fadeOut()：$(selector).fadeOut(speed,callback);  淡出可見元素
• fadeToggle()：$(selector).fadeToggle(speed,callback);  在 fadeIn() 與 fadeOut() 方法之間進行切換
• fadeTo()：$(selector).fadeTo(speed,opacity,callback); 漸變為給定的不透明度（值介於 0 與 1 之間）
  
• 其中，

  speed： 效果的時長，可選（fadeto中必須有這個引數），可取以下值："slow"、"fast" 或毫秒。.

  callback ： fading 完成後所執行的函式名稱，可選。

• 用法：

• $(function(){
              $("#btn").click(function(){
                  $("#box4").fadeToggle(1000);
              });
          });

3.滑動

滑動方法：

• slideDown()：$(selector).slideDown(speed,callback); 向下滑動已隱藏元素
• slideUp()：$(selector).slideUp(speed,callback); 向上滑動已顯示元素
• slideToggle()：$(
  selector).slideToggle(speed,callback);在 slideDown() 與 slideUp() 方法之間進行切換

$(function(){
        $("#btn").click(function(){
            $("#box4").slideToggle();
        });
    });

animate()：$(selector).animate({params},speed,callback);

{params}：必選，動畫的 CSS 屬性；

speed：可選，動畫執行的速度；

callback：可選，動畫百分之百執行完成之後指定的函式。

用法：

 $(function(){
        $("#btn").click(function(){
            $("#box4").animate({
                marginLeft:"100px"
            });
        });
    });

$("#box4").animate({
                marginLeft:"100px",
                height:"200px",
                width:"200px"
            });

$("#box4").animate({
                marginLeft:"+=10px",
                height:"+=10px",
                width:"+=10px"
            });

 $("#box4").animate({
               height:"toggle",
            });

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

5.停止動畫
stop()：$(selector).stop(stopAll,goToEnd);適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。

stopAll ：可選，是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。

goToEnd ：可選，是否立即完成當前動畫。預設是 false。

預設地，stop() 會清除在被選元素上指定的當前動畫。

用法：

 $("#stop").click(function(){
            $("#box4").stop();
        });