jQuery的animate函數學習記錄，jqueryanimate函數

jQuery的animate函數學習記錄，jqueryanimate函數

很久之前就對jQuery animate的實現非常感興趣，不過前段時間很忙，直到前幾天端午假期才有時間去研究。

jQuery.animate的每種動畫過渡效果都是通過easing函數實現的。jQuery1.4.2中就預置了兩個這樣的函數：

easing: {linear: function( p, n, firstNum, diff ) {return firstNum + diff * p;},swing: function( p, n, firstNum, diff ) {return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;}}

從參數名隱約可以推測出firstNum是初始值。要是你的數學學得比較好，你可以發現linear函數是直線方程；要是你的物理學得比較好，你可以發現它是勻速運動的位移方程（我數學和物理都沒學好，是別人提醒我的……）。那麼diff和p就是速度和時間了。

再看看jQuery.animate的原型：

animate: function( prop, speed, easing, callback )

各參數的說明如下：

prop：一組包含作為動畫屬性和終值的樣式屬性和及其值的集合。
speed：動畫時間長度。
easing：要使用的擦除效果的名稱。
callback：動畫完成時執行的函數。

元素的當前樣式值（firstNum）可以擷取，動畫時間長度（p）就是duration，最終樣式值是prop。理論上說，動畫速度（diff）是可以算出來的。但是這又必然需要另一個函數進行運算。這樣做明顯是不明智的。再看看調用easing函數的相關代碼（位於jQuery.fx.prototype.step中）：

var t = now()；
...
var n = t - this.startTime;
this.state = n / this.options.duration;
...
this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

可以發現，p參數的值也就是this.state的值，從上下文得知它實際上是動畫的時間進度。而firstNum和diff的參數值都是寫死的，分別是0和1。這下easing函數的秘密完全被解開，p、firstNum、diff都是百分率而非實際數值，easing函數的傳回值也就是位移的進度。diff的值是1，也就是以1倍的速度運行動畫。算出位移進度後，通過“初始值+（最終值-初始值）×進度”就可以算出當前位移值：

this.now = this.start + ((this.end - this.start) * this.pos);

通過setInterval每隔一定時間（jQuery中是13ms）進行一次位移運算，直到目前時間與初始時間的差值大於動畫時間長度，這就是jQuery.animate的執行過程。

按照常規思路，動畫的實現方式是這樣的：通過setInterval每隔一定時間給某個值增加特定數值，直到這個值達到限制值。這樣做的主要問題是，不同瀏覽器的運行速度不同，從而導致動畫速度有差異，一般是IE下比較慢，Firefox下比較快。而jQuery.animate是以目前時間來決定位移值，某個時刻的位移值總是固定的，因而動畫速度不會有差異。

jquery animate（）函數的執行

使用:not(:animated)篩選
$(".next").click(function(){
$("....(原來的篩選):not(:animated)")......(執行的動作)
})

舉例：
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
 
jquery的animate動畫的回呼函數怎帶參數？

animate(params,options)
用於建立自訂動畫的函數。
這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。
注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.

而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值，樣式屬性就會從當前的值漸層到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字串值，則會為該屬性調用預設的動畫形式。

在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過在屬性值前面指定 "+=" 或 "-=" 來讓元素做相對運動。

傳回值
jQuery

參數
params (Options) : 一組包含作為動畫屬性和終值的樣式屬性和及其值的集合

options (Options) : 一組包含動畫選項的值的集合。

選項
duration (String,Number) : (預設值: "normal") 三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時間長度的毫秒數值(如：1000)

easing (String) : (預設值: "swing") 要使用的擦除效果的名稱(需要外掛程式支援).預設jQuery提供"linear" 和 "swing".

complete (Function) : 在動畫完成時執行的函數

step (Callback) : Template:APICallback

queue (Boolean) : (預設值: true) 設定為false將使此動畫不進入動畫隊列 (jQuery 1.2中新增)

樣本
第一個按鈕按了之後展示了不在隊列中的動畫。在div擴充到90%的同時也在增加字型，一旦字型改變完畢後，邊框的動畫才開始。

第二個按鈕按了之後就是一個傳統的鏈式動畫，即等前一個動畫完成後，後一個動畫才會開始.

HTML 程式碼:

<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代碼:

$("#go1").click(function(){
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { bor......餘下全文>>