step這個(gè)屬性，研究了1天了，我來(lái)嘗試回答一下：

先引入一個(gè)概念：

一個(gè)動(dòng)畫(huà)執(zhí)行的進(jìn)度，可以用2個(gè)指標(biāo)來(lái)描述，一個(gè)是動(dòng)畫(huà)屬性的變動(dòng)值，另一個(gè)是動(dòng)畫(huà)在整個(gè)執(zhí)行過(guò)程的進(jìn)度

比如有一個(gè)動(dòng)畫(huà)效果：div向左移動(dòng)100px，用時(shí)200毫秒

那么我們?cè)趺疵枋鲞@個(gè)動(dòng)畫(huà)的每一步是什么呢？

我們可以說(shuō)：div向左每移動(dòng)1個(gè)px，可以看成動(dòng)畫(huà)執(zhí)行了一步；

同時(shí)我們也可以說(shuō)：我們把200毫秒分成100個(gè)時(shí)間段，動(dòng)畫(huà)開(kāi)始后，把每個(gè)時(shí)間段的流逝，看作動(dòng)畫(huà)執(zhí)行了一步。

要特別特別注意的是：在animate方法中，每一步具體是怎么分解的，不是由我們?cè)O(shè)定的CSS屬性值和動(dòng)畫(huà)時(shí)長(zhǎng)來(lái)決定的，是由系統(tǒng)來(lái)決定的。

舉個(gè)例子：

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

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

你會(huì)發(fā)現(xiàn)，每次重復(fù)執(zhí)行，然而幾乎每一次 i 的值都有少量的差別，好了，結(jié)論就是：系統(tǒng)決定動(dòng)畫(huà)片段的數(shù)量。

上面扯的有點(diǎn)遠(yuǎn)了，不過(guò)對(duì)我們理解動(dòng)畫(huà)進(jìn)度這個(gè)概念還是有幫助的，現(xiàn)在可以來(lái)解釋 step 和 progress 的區(qū)別了

• 相同點(diǎn)：step 和 progress 這兩個(gè)屬性，都是在動(dòng)畫(huà)執(zhí)行的每個(gè)階段來(lái)調(diào)用函數(shù)，大部分情況下，使用任意一個(gè)，都可以得到我們想要的效果。

• 不同點(diǎn)，主要在fx這個(gè)參數(shù)上：

  step：?fx返回的是和css相關(guān)的屬性；

  progress： fx返回的是動(dòng)畫(huà)進(jìn)度本身的屬性；

舉個(gè)例子：

<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("參與動(dòng)畫(huà)的元素："+fx.elem);
????????fx.elem?=?$("p");
????}
});
</script>

運(yùn)行一下你會(huì)發(fā)現(xiàn)，雖然我們?cè)赿iv元素上添加了動(dòng)畫(huà)，但是實(shí)際執(zhí)行動(dòng)畫(huà)的元素卻是p

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

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

不過(guò)progress的回調(diào)函數(shù)fx，就沒(méi)有這么多花樣了，因?yàn)樗祷氐木褪莿?dòng)畫(huà)進(jìn)度本身，也就是返回當(dāng)前的進(jìn)度值。代碼如下：

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

另外要說(shuō)明的是：step 函數(shù)只能返回我們?cè)诖a中設(shè)置的最后一條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("屬性結(jié)束值："+fx.end);
????????console.log("屬性當(dāng)前值："+fx.now);
????}
})

以上代碼只能返回 opacity 屬性的相關(guān)值，而無(wú)法返回left的值，雖然這個(gè)值也參與了動(dòng)畫(huà)效果