jQuery的 动画方法 animate() 的 step属性和progress属性的解读

先引入一个概念：
一个动画执行的进度，可以用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，就没有这么多花样了，因为它返回的就是动画进度本身，也就是返回当前的进度值。

最后要注意的是：step方法，只能返回代码中最后一个属性值
代码如下：

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