簡介：jQuery動畫提供了一組網頁中常見的動畫效果，這些動畫是標準的、有規律的效果；同時還提供了一些自定義動畫的功能。

1.顯示的方法show()：作用--讓匹配的元素展示出來；隱藏的方法hide()

①引數為數值型別，表示執行動畫的毫秒數

$(selector).show(2000);

②引數為字串型別，jQuery的自帶預設值（slow--600ms、normal--400ms、fast--200ms）

$(selector).show("slow");

③第二個引數為回撥函式，動畫執行完成之後執行的函式

$(selector).show(2000, function() {});

④不帶任何引數，作用等同於設定display:none和display:block

$(selector).show();

2.滑入slideDown()和滑出slideUp()效果

引數和用法和上面一致，不再過多重複，但是有一個slideToggle()方法，引數一致。

注意：省略的引數或者傳入的引數不合法，就會使用預設值（400ms），jQuery動畫都適用。

3.淡入（fadeIn()）效果和淡出（fadeOut()）,以及自動切換（fadeToggle()）

$(selector).fadeIn(speed, callback);    //作用：讓元素以淡淡的進入視線的方式展示出來

$(selector).fadeOut(1000);    //作用：讓元素以漸漸消失的方式隱藏起來

$(selector).fadeToggle('fast', callback);    //作用：通過改變不透明度，切換匹配元素的顯示或隱藏狀態

$(selector).fadeTo(1000, .5);    //fadeTo可以指定元素不透明度的具體值。
 

三種方法小結：

①

 ②jQuery提供的這幾個動畫控制的是寬度，高度，透明度；共同點：樣式屬性的值只有一個，這個值是數值（去掉單位）。 

③所有能夠執行動畫的屬性必須中有一個數字型別的值。 

4.自定義動畫 ：執行一組css屬性的自定義動畫

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

// 第一個引數表示：要執行動畫的CSS屬性（必選）

// 第二個引數表示：執行動畫時長（可選）

// 第三個引數表示：動畫執行完後立即執行的回撥函式（可選）

5.停止動畫stop()：停止當前正在執行的動畫

$(selector).stop(clearQueue, jumpToEnd);

// 第一個引數表示是否清空所有的後續動畫

// 第二個引數表示是否立即執行完當前正在執行的動畫


stop(true, true)       // 後續動畫不會執行，當前動畫立即跳到結束的位置
stop(true, false)      // 後續動畫不會執行，當前動畫立即停止
stop(false, true)      // 立即執行後續動畫，當前動畫立即跳到結束的位置
stop(false, false)     // 立即執行後續動畫，當前動畫立即停止

注意：如果元素動畫還沒有執行完，呼叫sotp() 那麼回撥函式不會被執行