jquery animate step 实现 transform css3方法

animate()方法有个step参数规定动画执行的每一步都要执行step这个回调函数。

我们可以用使用一个不影响元素效果显著的css值来触发animate()开发方法 ，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了

实例：

<style type="text/css">      .demo {        width: 100px;        height: 100px;        border: 1px solid red;      }</style>

<div class="demo"></div><button>sss</button><script type="text/javascript" src="jquery-1.11.1.min.js"></script><script type="text/javascript">    $("button").click(function(){        $(".demo").animate({            aa:"360" //目的就是取一个属性值360        },{            step:function(now,fx){                //console.log(now);                $(".demo").css({"transform":"rotate("+now+"deg)"})            },            duration:1000        });    })</script><script>  $(".demo").animate({      aa:2,      bb:10  }, {      step:function(now,fx){      //参数step：规定每个动画的每一步完成之后要执行的函数          // now:是当前动画正在改变的属性的实时值；          // fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如          // 执行动画的元素：elem;          // 动画正在改变的属性：prop;          // 正在改变属性的当前值：now;          // 正在改变属性的结束值：end;          // 正在改变属性的单位：unit;等          // 可在这里改变animate第1个参数中设置的属性bb在动画结束时的值          if(fx.prop=="bb"){fx.end=5}          //console.log(fx.prop+": "+n);      },      duration:1000  })</script>