jQuery中Animate進階用法（一）

jQuery中animate的用法你了解多少呢？如果僅僅是簡單的移動位置，顯示隱藏，哦！天哪你在浪費資源！因為animate太強大了，你可以有很多意想不到的用法！讓我們一起研究一下吧~~

首先要了解jQuery API中animate的詳細用法。

animate( properties [, duration ] [, easing ] [, complete ] )

返回jQuery對象

描述: 根據一組 CSS 屬性，執行自定義動畫。

1、animate( properties [, duration ] [, easing ] [, complete ] )

1、properties
類型: PlainObject
一個CSS屬性和值的對象,動畫將根據這組對象移動。
2、duration (默認: 400)
類型: Number or String
一個字符串或者數字決定動畫將運行多久。（默認值: "normal"， 字符串"slow", "normal", 或 "fast"或表示動畫時長的毫秒數值(如：1000) ）
3、easing (默認: swing)
類型: String
一個字符串，表示過渡使用哪種緩動函數。（jQuery自身提供"linear" 和 "swing"）
4、complete
類型: Function()
在動畫完成時執行的函數。

2、animate( properties, options )

1、properties
類型: PlainObject
一個CSS屬性和值的對象,動畫將根據這組對象移動。
2、options
類型: PlainObject
一組包含動畫選項的值的集合。 支持的選項:

1、duration (default: 400)
Type: Number or String
一個字符串或者數字決定動畫將運行多久。（愚人碼頭注：默認值: "normal"， 三種預定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數值(如：1000) ）
2、easing (default: swing)
Type: String
一個字符串，表示過渡使用哪種緩動函數。（愚人碼頭注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件）
3、queue (default: true)
Type: Boolean or String
一個布爾值，指示是否將動畫放置在效果隊列中。如果為false時，將立即開始動畫。 從jQuery1.7開始，隊列選項也可以接受一個字符串，在這種情況下，在動畫被添加到由該字符串表示的隊列中。當一個自定義的隊列名稱被使用，動畫不會自動啟動;你必須調用.dequeue("queuename")來啟動它。
4、specialEasing
Type: PlainObject
由此方法的第一個參數properties定義的一個或多個CSS屬性，及其相應的緩動函數組成的鍵值對map。( 1.4 新增)
5、step
Type: Function( Number now, Tween tween )
每個動畫元素的每個動畫屬性將調用的函數。這個函數為修改Tween 對象提供了一個機會來改變設置中得屬性值。
6、progress
Type: Function( Promise animation, Number progress, Number remainingMs )
每一步動畫完成后調用的一個函數，無論動畫屬性有多少，每個動畫元素都執行單獨的函數。(version added: 1.8)
7、complete
Type: Function()
在動畫完成時執行的函數。
8、done
Type: Function( Promise animation, Boolean jumpedToEnd )
在動畫完成時執行的函數。 (他的Promise對象狀態已完成). (version added: 1.8)
9、fail
Type: Function( Promise animation, Boolean jumpedToEnd )
動畫失敗完成時執行的函數。(他的Promise對象狀態未完成)。 (version added: 1.8)
10、always
Type: Function( Promise animation, Boolean jumpedToEnd )
在動畫完成或未完成情況下停止時執行的函數。(他的Promise對象狀態已完成或未完成)。(version added: 1.8)

一些基本的應用你可以參照jQuery API，或者參照 jQuery API 中文。

橙色部分是我想要重點講解的！

 PlainObject

PlainObject類型，是Javascript對象包含0個或者跟多鍵值對。換句話說，PlainObject也是Object對象。但在jQuery文檔中，被設計是為了區分其他多種Javascript對象。如null,用戶自定義的數組，或者是主機對象向如document,typeof 值都是 “object”。通過jQuery.isPlainObject()方法來判斷傳入的的參數是否是PlainObject.

var a = [];
var d = document;
var o = {};
 
typeof a; // object
typeof d; // object
typeof o; // object
 
jQuery.isPlainObject( a ); // false
jQuery.isPlainObject( d ); // false
jQuery.isPlainObject( o ); // true

queue

一個布爾值，指示是否將動畫放置在效果隊列中。如果為false時，將立即開始動畫。

它是來決定不同動畫進行的順序。

$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
 $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );

#block1要執行的動畫中，使用了 queue: false 選項，該動畫使元素的寬度擴大到了總寬 90%,並且 文字大小也變大了。一旦字體大小改變完了，邊框的動畫就會開始。注意到是並且了嗎？是同時進行的~~

#block2要執行的動畫中，包含了一系列動畫，當前一個動畫完成時，后一個動畫就會開始。

下次開始講step！