jquery动画控制非css属性

JQuery的animate()方法可以通过渐变的更改CSS属性来实现简单的动画效果，

比如

1  $("#box").animate({height:"300px"},3000);

可以控制id为box的标签在3秒内将高度更改到300px。那么如果想要控制非CSS属性呢，比如说针对一些WebGl中的动画控制，如果使用setInterval倒是可以实现效果，但是太过麻烦。这个时候就可以使用animate方法，生成递进的值，自己获取值来控制一些非CSS属性，比如：

//输出在1秒内从0递进到20每步执行的值$({height:0}).animate({height:20},{
    step: function(val) {
        console.log(val);
    },
    duration:1000 //动画持续时间（毫秒）
})

setp回调函数会在每次数据发生变化时调用。这样就可以通过val的值来控制一些非CSS3的属性实现动画效果。

注：上述代码中出现的两个height只是个名字，可以随意取，不影响代码运行。

原文地址：https://www.cnblogs.com/-lyl/p/animate.html