jQuery之深入學習Animate（一）

這篇文章帶給大家的內容是jQuery之深入學習Animate（一），讓大家進一步了解jQuery中animate的用法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

# jQuery中animate的用法你了解多少呢？如果只是簡單的移動位置，顯示隱藏，哦！天哪你在浪費資源！因為animate太強大了，你可以有很多意想不到的用法！下面就讓我們一起研究一下吧。 【相關影片教學推薦：jQuery教學】

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

animate：傳回jQuery物件

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

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

一、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() 

#在動畫完成時執行的函數。

二、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 就留到下次在讲解吧！

以上是jQuery之深入學習Animate（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！