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的值，虽然这个值也参与了动画效果