jQuery.animate() 函數詳解

nimate()函數用於執行一個基於css屬性的自定義動畫。

你能夠爲匹配的元素設置css樣式，animate()函數將會執行一個從當前樣式到指定的css樣式的一個過渡動畫。

例如：某個div元素的當前高度爲100px，將其CSS height屬性設爲200px，animate()將會執行一個將div元素的高度從100px逐漸增長到200px的過渡動畫。

該函數屬於jQuery對象(實例)。
語法

jQuery 1.0 新增該函數。animate()函數主要有如下兩種形式的用法：

用法一：

jQueryObject.animate( cssProperties [, duration ] [, easing ] [, complete ] )

用法二：

jQueryObject.animate( cssProperties, options )

用法二是用法一的變體。以對象形式指定所需的選項參數(可指定比用法一更多的選項參數)。
參數
參數 描述
cssProperties Object類型一個或多個css屬性的鍵值對所構成的Object對象。
duration 可選/String/Number類型指定動畫運行多長時間(毫秒數)，默認值爲400。該參數也能夠爲字符串"fast"(=200)或"slow"(=600)。
easing 可選/String類型指定使用何種動畫效果，默認爲"swing"，還能夠設爲 "linear"或其餘自定義的動畫樣式函數。
complete 可選/Function類型元素顯示完畢後須要執行的函數。函數內的this指向當前DOM元素。
options Object類型指定的選項參數對象。

參數options對象能夠識別以下的屬性(如下屬性均是可選的)：
屬性 屬性描述
duration 參見參數duration。
easing 參見參數easing。
complete 參見參數complete。
queue Boolean類型指示是否將動畫放入效果隊列中，默認爲true。從1.7版本開始，該參數能夠爲字符串，用於放入指定名稱的效果隊列。若是你指定的隊列不會自動開始，你須要手動調用dequeue("queueName")來啓動隊列。

此外，jQuery 1.4 和 1.8 還爲參數options新增了許多新的選項支持，但這些參數並不經常使用，此處再也不贅述，詳見jQuery官方文檔。
返回值

animate()函數的返回值爲jQuery類型，返回當前jQuery對象自己。
示例&說明

除了如下提到的值外，全部動畫css屬性都應該能夠變化爲一個單一的數值。使用基本的jQuery功能，大多數非數值的css屬性都沒法用來執行動畫。例如：width、height、left、top均可用於動畫，但color、background-color沒法用於動畫(除非使用jQuery.Color()插件)。除非你爲屬性值指定了單位(例如：px、em、%)，不然默認的數值單位爲像素(px)。

速寫的css屬性可能沒法得到完整全面的支持，例如：border、margin等，所以不推薦使用。

你還能夠將css屬性值設爲一些特定的字符串，例如："show"、"hide"、"toggle"，則jQuery會調用該屬性默認的動畫形式。

此外，css屬性值也能夠是相對的，你能夠爲屬性值加上前綴"+="或"-="，以便於在原來的屬性值上增長或減小指定的數值。例如：{ "height": "+=100px" }，表示在原有高度的基礎上增長100px。

請參考下面這段初始HTML代碼：

<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>
動畫效果：
<select id="animation">
<option value="1">動畫1</option>
<option value="2">動畫2</option>
<option value="3">動畫3</option>
<option value="4">動畫4</option>
<option value="5">動畫5</option>
</select>
<input id="exec" type="button" value="執行動畫" >

如下是與animate()函數相關的jQuery示例代碼，以演示animate()函數的具體用法：

$("#exec").click( function(){
var v = $("#animation").val();
var $myDiv = $("#myDiv");
if(v == "1"){
// 數值的單位默認是px
$myDiv.animate( { height: 200 } );
}else if(v == "2"){
// 在現有高度的基礎上增長300px (若是原來是100px，增長後就是400px)
// 多個動畫連續執行
$myDiv.animate( { height: "+=300px" }, "slow" );
$myDiv.animate( { width: "50%" }, 1000 );
$myDiv.animate( { width: "200px", height: "100px" }, 1000 );
}else if(v == "3"){
// font-size或fontSize都可，由多個單詞構成的屬性均是如此
$myDiv.animate( { fontSize: "30px" }, 2000 );
$myDiv.animate( { fontSize: "14px" }, 2000, function(){
alert("動畫3執行完畢!");
});
}else if(v == "4"){
$myDiv.animate( { width: "50%", height: "50%" }, { duration: 2000, easing: "linear" });
}else if(v == "5"){
// 根據高度切換顯示/隱藏，顯示時高度從0增長到原高度，隱藏時高度從原高度減少到0
$myDiv.animate( { height: "toggle" });
}
} );

運行代碼