1. 顯示動畫

jQuery的原型上的方法 show()方法可以實現讓DOM元素進行顯示動畫。

• 語法： show([speed,[easing],[fn]])

• 引數

  • speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
  • fn:在動畫完成時執行的函式，每個元素執行一次。
  • easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear".可以可以進行擴充套件，比如參考文章：地址

• 返回值： jQuery包裝物件。

• 示例

// 顯示所有段落
// <p style="display: none">Hello</p>
$("p").show()

// 用緩慢的動畫將隱藏的段落顯示出來，歷時600毫秒。
// <p style="display: none">Hello</p>
$("p").show("slow");

// 用迅速的動畫將隱藏的段落顯示出來，歷時200毫秒。並在之後執行反饋！
// <p style="display: none">Hello</p>
$("p").show("fast",function(){
   $(this).text("Animation Done!");
 });

// 將隱藏的段落用將近4秒的時間顯示出來。。。並在之後執行一個反饋。。。
// <p style="display: none">Hello</p>
$("p").show(4000,function(){
   $(this).text("Animation Done...");
 });
 

2. 隱藏動畫

語法： hide([speed,[easing],[fn]])

隱藏動畫的引數和使用跟show表現一致。在此就不贅述。

$("p").hide()
// 用600毫秒的時間將段落緩慢的隱藏
$("p").hide("slow");
// 用200毫秒將段落迅速隱藏，之後彈出一個對話方塊。
$("p").hide("fast",function(){
   alert("Animation Done.");
 });

3. 下滑顯示（slideDown)

語法：slideUp([speed,[easing],[fn]])

通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回撥函式。這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。

引數跟show保持一致，不再贅述。

// 用600毫秒緩慢的將段落滑上
$("p").slideUp("slow");
// 用200毫秒快速將段落滑上，之後彈出一個對話方塊
$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });

4. 摺疊隱藏效果（slideUp)

語法： slideUp([speed,[easing],[fn]])

通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回撥函式。

跟slideDown的語法保持一致。引數等不再贅述。

$("p").slideUp("slow");
// 用200毫秒快速將段落滑上，之後彈出一個對話方塊
$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });
 

5. 摺疊和下拉效果切換方法（toggleSlide)

語法：slideToggle([speed],[easing],[fn])

用法跟slideUp和slideDown保持一致。如果元素已經滑上去了，那麼執行此方法就會滑下來。

6. 淡入、淡出效果

由於淡入淡出的方法跟slide系列的方法保持一致。不贅述。

7、設定元素透明度動畫

• 語法：fadeTo([[speed],opacity,[easing],[fn]])

• 概述

把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回撥函式。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。

• 引數

  • speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
  • opacity:一個0至1之間表示透明度的數字。0完全透明，1完全不透明。
  • easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"
  • fn:在動畫完成時執行的函式，每個元素執行一次。

• 示例

// 使用淡入效果來顯示一個隱藏的 <p> 元素：
$(".btn2").click(function(){
  $("p").fadeIn();
});
// 用600毫秒緩慢的將段落的透明度調整到0.66，大約2/3的可見度
$("p").fadeTo("slow", 0.66);
// 用200毫秒快速將段落的透明度調整到0.25，大約1/4的可見度，之後彈出一個對話方塊
$("p").fadeTo("fast", 0.25, function(){
   alert("Animation Done.");
 });

8. 自定義動畫

jQuery封裝了對css中數值屬性的動畫效果的封裝，可以讓開發人員對數值類的屬性進行自定義的動畫。

• 語法 animate(params,[speed],[easing],[fn])

• 引數

  • params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
  • speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
  • easing:要使用的擦除效果的名稱(需要外掛支援).預設jQuery提供"linear" 和 "swing".
  • fn:在動畫完成時執行的函式，每個元素執行一次。

• 示例

// 在一個動畫中同時應用三種類型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

// 讓指定元素左右移動
// HTML 程式碼:
// <button id="left">«</button> <button id="right">»</button>
// <div class="block"></div>
// jQuery 程式碼:
$("#right").click(function(){
  $(".block").animate({left: '+=50px'}, "slow");
});

$("#left").click(function(){
  $(".block").animate({left: '-=50px'}, "slow");
});

// 在600毫秒內
$("p").animate({
   height: '300px', opacity: '0.2'
 }, "slow");

滾動到頂部案例

    $('#btnScrollTop').on('click', function(e) {
        $('html,body').animate({
          scrollTop: 0
        }, 1000);
      });

9. 停止動畫

語法：stop([queue],[clearQueue],[jumpToEnd])

停止所有在指定元素上正在執行的動畫。如果佇列中有等待執行的動畫(並且clearQueue沒有設為true)，他們將被馬上執行

引數:

• clearQueue:如果設定成true，則清空佇列。可以立即結束動畫。

• jumpToEnd:讓當前正在執行的動畫立即完成，並且重設show和hide的原始樣式，呼叫回撥函式等。

• queue:用來停止動畫的佇列名稱(v1.7+ 以後版本才新增)

• 示例

// 停止當前正在執行的動畫：
$("#stop").click(function(){
  $("#box").stop();
  // 立即結束當前動畫，並清空佇列。
  $("#box").stop(true, true);
});
// 點選Go之後開始動畫,點Stop之後會在當前位置停下來
// <button id="go">Go</button> <button id="stop">STOP!</button>
// <div class="block"></div><button id="go">Go</button> <button id="stop">STOP!</button>
// <div class="block"></div>
// 開始動畫
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

// 當點選按鈕後停止動畫
$("#stop").click(function(){
  $(".block").stop();
});

10. 結束動畫

• 語法：finish( [queue ] )

• 概述

停止當前正在執行的動畫，刪除所有排隊的動畫，並完成匹配元素所有的動畫。當.finish()在一個元素上被呼叫，立即停止當前正在執行的動畫和所有排隊的動畫（如果有的話），並且他們的CSS屬性設定為它們的目標值（所有動畫的目標值）。所有排隊的動畫將被刪除。如果第一個引數提供，該字串表示的佇列中的動畫將被停止。

.finish()方法和.stop(true, true)很相似，.stop(true, true)將清除佇列，並且目前的動畫跳轉到其最終值。但是，不同的是，.finish() 會導致所有排隊的動畫的CSS屬性跳轉到他們的最終值。

• 引數queue：String型別，停止動畫佇列中的名稱。

• 示例

// 停止當前正在執行的動畫
$("#complete").click(function(){
  $("div").finish();
});

上課程式碼

<input type="button" value="動畫" id="btn">
  <input type="button" value="立即結束動畫" id="btnFinish">
  <input type="button" value="停止動畫" id="btnStop">
  <div class="box">
  </div>
  <script>
    $(function() {
      $('#btn').on('click', function(e) {
        $('.box').hide(1000)
        .show(1000)
        .slideUp(1000)
        .slideDown(1000)
        .fadeTo(1000, 0.5)
        .animate({width: 200}, 1000);
      });

      $('#btnFinish').on('click', function(e) {
        // 立即結束動畫,讓dom元素變化到最終動畫佇列都結束效果狀態。
        $('.box').finish();
      });

      $('#btnStop').on('click', function(e) {
        // stop方法傳入一個引數：false或者不傳引數，表示結束當前的動畫。後續的動畫不受影響
        // $('.box').stop(false);
        // 如果傳入第一個引數為true，後續的動畫也都受影響。不執行了。
        // $('.box').stop(true);

        // 讓dom元素動畫結束，然後讓dom元素到當前動畫結果的狀態。
        $('.box').stop(true, true);
      });
    });
  </script>

11. 延遲執行

• 語法：delay(duration,[queueName])

• 概述

設定一個延時來推遲執行佇列中之後的專案。用於將佇列中的函式延時執行。他既可以推遲動畫佇列的執行，也可以用於自定義佇列。

• 引數

  • duration:延時時間，單位：毫秒
  • queueName:佇列名詞，預設是Fx，動畫佇列。

• 示例

// 在.slideUp() 和 .fadeIn()之間延時800毫秒。
// <div id="foo /">
$('#foo').slideUp(300).delay(800).fadeIn(400);

12. jQuery動畫屬性設定

• 關閉頁面上所有的動畫

  jQuery.fx.off 把這個屬性設定為true可以立即關閉所有動畫(所有效果會立即執行完畢)

• 設定動畫的顯示幀速

  jQuery.fx.interval = 100;