這篇文章帶給大家的內容是jQuery之深入學習Animate（二），接著之前的文章【jQuery之深入學習Animate（一）】讓大家了解jQuery中animate的用法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
Step
Type： Function( Number now, Tween tween )
每個動畫元素的每個動畫屬性將呼叫的函數。這個函數為修改Tween 物件提供了一個機會來改變設定中得屬性值。
這個是如此的模糊，讓我們看下實例吧！
var k=0;
$( ".block:first" ).animate(
{
left: 100,top:200
},
{
duration: 1000,
step: function( now, fx ){
k++;
if(k==1) console.log(fx);
}
);你能想像輸出結果嗎？
讓我們來看jQuery原始碼：
jQuery.fx = Tween.prototype.init;
...
function Tween( elem, options, prop, end, easing ) {
return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;
Tween.prototype = {
constructor: Tween,
init: function( elem, options, prop, end, easing, unit ) {
this.elem = elem;
this.prop = prop;
this.easing = easing || "swing";
this.options = options;
this.start = this.now = this.cur();
this.end = end;
this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
},
...}ok！你應該有大致的輪廓了，讓我詳細講解下參數的意義~~
| 屬性 | #類型 | 值 |
| easing | 字串 | #動畫方式"linear",swing,easeIn,easeOut...等 |
| elem | DOM元素 | 正在動畫的元素 |
| end | 數值 | 動畫結束值 |
| now | 數值 | 動畫目前值 |
| options | 物件 | 參數 |
| options.duration | 數值 | 傳到動畫動的duration |
| options.queue | 字串 | #動畫佇列 |
| pos | 數值 | 在動畫過程中從0.0到1.0 |
| prop | 字串 | 正在變更的css屬性 |
| start | 數值 | CSS屬性開始變化的值 |
| 字串 | CSS值的單位 |
jQuery Animation實作css3動畫 ：
#jQuery Animation的工作原理是透過將元素的css樣式從一個狀態改變為另一個狀態。 CSS屬性值是逐漸改變的，這樣就可以創造出動畫效果。只有數字值可建立動畫（例如 “margin:30px”）。字串值無法建立動畫（例如 “background-color:red”）。 像CSS3好多效果因為不是數值的，所以是沒有辦法直接透過animate()方法來實現的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，這些方法的一個特點就是它們的值是字元和數字混合在一起的。因此我們是不可以直接用animate()方法來動態地修改它們的值來實現動畫的效果。 如果我們自己用Javascript實作CSS3動畫，那麼我們只能自已透過setInterval()方法來實現，實作起來比較複雜。其實animate()方法就是基於setInterval()方法進行工作的，但是可以用方便的設定動畫速度，還可以設定是勻速還是變速。 animate()方法的第二種用法有個stp參數規定動畫的每一步要執行的函數。我們可以用使用一個不影響元素效果顯著的CSS值來觸發animate()方法，然後在step回呼函數中修改我們想要修改的值，這樣就可以間接地實作動畫了。 CSS程式碼：#box {
width:100px;
height:100px;
position:absolute;
top:100px;
left:100px;
text-indent: 90px;
background-color:red;
}<p id="box"></p>
var s=0;
$('#box').animate({ textIndent: 0 }, { //这里的now参数即前面设置的数值，即textIndent: 0中的0，然后后面还有，则以后面的数值为准。
duration:2000,
step: function(now,fx) {
s++;
fx.start=45;//你可以尝试修改start,end值，来看rotate的变化
fx.end=0;
if(s==1) console.log(fx.start+"----"+fx.end+"---"+fx.startTime);
$(this).css('-webkit-transform','rotate('+now+'deg)');
}
});以上是jQuery之深入學習Animate（二）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
