jQuery.animate() 函數詳解

標籤：常用   ima   支援   匹配   queue   應該   jquery   slow   str   

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" });
}
} );

運行代碼

jQuery.animate() 函數詳解