step這個屬性，研究了1天了，我來嘗試回答一下：

先引入一個概念：

一個動畫執行的進度，可以用2個指標來描述，一個是動畫屬性的變動值，另一個是動畫在整個執行過程的進度

比如有一個動畫效果：div向左移動100px，用時200毫秒

那么我們怎么描述這個動畫的每一步是什么呢？

我們可以說：div向左每移動1個px，可以看成動畫執行了一步；

同時我們也可以說：我們把200毫秒分成100個時間段，動畫開始后，把每個時間段的流逝，看作動畫執行了一步。

要特別特別注意的是：在animate方法中，每一步具體是怎么分解的，不是由我們設定的CSS屬性值和動畫時長來決定的，是由系統來決定的。

舉個例子：

var?i?=?0;
$("div").animate({left:100},{
????duration:100,
????step:function(now,fx){
????????console.log(i)?//控制臺輸出，看看這個動畫被分解成了幾個片段
????}
});

上面的代碼中，不論使用step屬性或者progress屬性都可以執行。

你會發現，每次重復執行，然而幾乎每一次 i 的值都有少量的差別，好了，結論就是：系統決定動畫片段的數量。

上面扯的有點遠了，不過對我們理解動畫進度這個概念還是有幫助的，現在可以來解釋 step 和 progress 的區別了

• 相同點：step 和 progress 這兩個屬性，都是在動畫執行的每個階段來調用函數，大部分情況下，使用任意一個，都可以得到我們想要的效果。

• 不同點，主要在fx這個參數上：

  step：?fx返回的是和css相關的屬性；

  progress： fx返回的是動畫進度本身的屬性；

舉個例子：

<div?style="width:100px;height:100px;background-color:red"></div>
<p?style="width:100px;height:100px;background-color:black"></p>
<script>
$("div").animate({left:100},{
????duration:100,
????step:function(now,fx){
????????console.log("參與動畫的元素："+fx.elem);
????????fx.elem?=?$("p");
????}
});
</script>

運行一下你會發現，雖然我們在div元素上添加了動畫，但是實際執行動畫的元素卻是p

有意思吧，原因就在于，fx.elem = $("p"); ?將參與動畫的元素改變成了$("p")

step的回調函數fx，還添加了很多屬性，可以參考jQuery的API文檔：http://www.css88.com/jqapi-1.9/animate/

不過progress的回調函數fx，就沒有這么多花樣了，因為它返回的就是動畫進度本身，也就是返回當前的進度值。代碼如下：

$("div").animate({left:100},{
????duration:1000,
????progress:function(now,fx){
????????console.log("當前進度值："+arguments[1]);
????}
})

另外要說明的是：step 函數只能返回我們在代碼中設置的最后一條CSS屬性值，如：

$("div").animate({
????left:100,
????opacity:0.2
????},{
????duration:1000,
????step:function(now,fx){
????????console.log("返回的CSS屬性是："+fx.prop);
????????console.log("屬性初始值："+fx.start);
????????console.log("屬性結束值："+fx.end);
????????console.log("屬性當前值："+fx.now);
????}
})

以上代碼只能返回 opacity 屬性的相關值，而無法返回left的值，雖然這個值也參與了動畫效果