jQuery動畫可以用animte函數實現，該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。

animte函數

CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。只有數字值可創建動畫，比如：

$("#content").animate({height:"100px"});

直接按F12，然后在console中復制上面代碼即可執行。

該函數的接口是：

$(selector).animate(styles,options)
$(selector).animate(styles,speed,easing,callback)

對于第一種接口options可能的值：

• speed-設置動畫的速度
• easing-規定要使用的easing函數
• callback-規定動畫完成之后要執行的函數
• step-規定動畫的每一步完成之后要執行的函數
• queue-布爾值。指示是否在效果隊列中放置動畫。如果為false，則動畫將立即開始
• specialEasing-來自styles參數的一個或多個CSS屬性的映射，以及它們的對應easing函數

如：

$("#content").animate({height:"100px"},"linear");

easing函數

在jQuery1.4.2中,默認提供了提供了兩種動畫補間效果,線性和擺動運動曲線：但我們需要使用復雜一些的運動效果，比如讓元件按照雙曲線或拋物線運動趨勢改變時，這兩個函數就顯得明顯不夠了。不過這實現起來并不復雜，只需要按照相應的數學公式，添加自定義的easing補間動畫效果函數即可。比如，現在要讓網頁上的元件按照y=x^4的曲線運動，運行趨勢為先緩后急。jQuery1.4的linear和swing的動畫實現代碼是這樣的，最新版的jQuery做了改進，只使用了一個參數p，但不容易看出各個參數的作用，因此這里使用了一個比較原始版本。

jQuery.extend({

……

easing:{

linear:function(p,n,firstNum,diff){

returnfirstNum+diff*p;

},

swing:function(p,n,firstNum,diff){

return((-Math.cos(p*Math.PI)/2)+0.5)*diff+firstNum;

}

},

……

});