小編給大家分享一下 jQuery中animate的用法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)10多年成都定制網(wǎng)站服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都定制網(wǎng)站及推廣,對(duì)成都工商代辦等多個(gè)方面擁有豐富的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

首先要了解jQuery API中animate的詳細(xì)用法。

animate：返回jQuery對(duì)象

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

描述:根據(jù)一組 CSS 屬性，執(zhí)行自定義動(dòng)畫。

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

1、properties

類型:

一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)。

2、duration (默認(rèn): 400)

類型: Number or String

一個(gè)字符串或者數(shù)字決定動(dòng)畫將運(yùn)行多久。（默認(rèn)值: "normal"， 字符串"slow", "normal", 或 "fast"或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如：1000) ）

3、easing (默認(rèn): swing)

類型: String

一個(gè)字符串，表示過(guò)渡使用哪種緩動(dòng)函數(shù)。（jQuery自身提供"linear" 和 "swing"）

4、complete

類型: Function()

在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)。

二、animate( properties, options )

1、properties

類型: PlainObject

一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)。

2、

類型: PlainObject

一組包含動(dòng)畫選項(xiàng)的值的集合。 支持的選項(xiàng):

1）、duration (default: 400)

Type: Number or String

一個(gè)字符串或者數(shù)字決定動(dòng)畫將運(yùn)行多久。（愚人碼頭注：默認(rèn)值: "normal"， 三種預(yù)定速度的字符串("slow", "normal", 或 "fast")或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如：1000) ）

2）、easing (default: swing)

Type: String

一個(gè)字符串，表示過(guò)渡使用哪種緩動(dòng)函數(shù)。（愚人碼頭注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件）

3）、 (default: true)

Type: Boolean or String

一個(gè)布爾值，指示是否將動(dòng)畫放置在效果隊(duì)列中。如果為false時(shí)，將立即開始動(dòng)畫。 從jQuery1.7開始，隊(duì)列選項(xiàng)也可以接受一個(gè)字符串，在這種情況下，在動(dòng)畫被添加到由該字符串表示的隊(duì)列中。當(dāng)一個(gè)自定義的隊(duì)列名稱被使用，動(dòng)畫不會(huì)自動(dòng)啟動(dòng);你必須調(diào)用.dequeue("queuename")來(lái)啟動(dòng)它。

4）、specialEasing

Type: PlainObject

由此方法的第一個(gè)參數(shù)properties定義的一個(gè)或多個(gè)CSS屬性，及其相應(yīng)的緩動(dòng)函數(shù)組成的鍵值對(duì)map。( 1.4 新增)

5）、

Type: Function( Number now, Tween tween )

每個(gè)動(dòng)畫元素的每個(gè)動(dòng)畫屬性將調(diào)用的函數(shù)。這個(gè)函數(shù)為修改Tween 對(duì)象提供了一個(gè)機(jī)會(huì)來(lái)改變?cè)O(shè)置中得屬性值。

6）、

Type: Function( Promise animation, Number progress, Number remainingMs )

每一步動(dòng)畫完成后調(diào)用的一個(gè)函數(shù)，無(wú)論動(dòng)畫屬性有多少，每個(gè)動(dòng)畫元素都執(zhí)行單獨(dú)的函數(shù)。(version added: 1.8)

7）、complete

Type: Function()

在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)。

8）、done

Type: Function( Promise animation, Boolean jumpedToEnd )

在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)。 (他的Promise對(duì)象狀態(tài)已完成). (version added: 1.8)

9）、fail

Type: Function( Promise animation, Boolean jumpedToEnd )

動(dòng)畫失敗完成時(shí)執(zhí)行的函數(shù)。(他的Promise對(duì)象狀態(tài)未完成)。 (version added: 1.8)

10）、always

Type: Function( Promise animation, Boolean jumpedToEnd )

在動(dòng)畫完成或未完成情況下停止時(shí)執(zhí)行的函數(shù)。(他的Promise對(duì)象狀態(tài)已完成或未完成)。(version added: 1.8)

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

是本篇想要重點(diǎn)講解的！

PlainObject

PlainObject類型，是Javascript對(duì)象包含0個(gè)或者跟多鍵值對(duì)。換句話說(shuō)，PlainObject也是Object對(duì)象。但在jQuery文檔中，被設(shè)計(jì)是為了區(qū)分其他多種Javascript對(duì)象。如null,用戶自定義的數(shù)組，或者是主機(jī)對(duì)象向如document,typeof 值都是 “object”。通過(guò)jQuery.isPlainObject()方法來(lái)判斷傳入的的參數(shù)是否是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

一個(gè)布爾值，指示是否將動(dòng)畫放置在效果隊(duì)列中。如果為false時(shí)，將立即開始動(dòng)畫。

它是來(lái)決定不同動(dòng)畫進(jìn)行的順序。

$( "#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要執(zhí)行的動(dòng)畫中，使用了 queue: false 選項(xiàng)，該動(dòng)畫使元素的寬度擴(kuò)大到了總寬 90%,并且 文字大小也變大了。一旦字體大小改變完了，邊框的動(dòng)畫就會(huì)開始。注意到是并且了嗎？是同時(shí)進(jìn)行的~~

#block2要執(zhí)行的動(dòng)畫中，包含了一系列動(dòng)畫，當(dāng)前一個(gè)動(dòng)畫完成時(shí)，后一個(gè)動(dòng)畫就會(huì)開始。

看完了這篇文章，相信你對(duì) jQuery中animate的用法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享文章：?jQuery中animate的用法-創(chuàng)新互聯(lián)
鏈接URL：http://chinadenli.net/article32/dgippc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、用戶體驗(yàn)、微信公眾號(hào)、ChatGPT、網(wǎng)站導(dǎo)航、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)