javascript简易动画类(div渐变)

　　function Animate(el, prop, opts) {

　　this.el = el;

　　this.prop = prop;

　　this.from = opts.from;

　　this.to = opts.to;

　　this.time = opts.time;

　　this.callback = opts.callback;

　　this.animDiff = this.to - this.from;

　　}

　　Animate.prototype._setStyle = function(val) {

　　switch(this.prop) {

　　case 'opacity':

　　this.el.style[this.prop] = val;

　　this.el.style.filter = 'alpha(opacity=' + val * 100 + ')';

　　break;

　　default:

　　this.el.style[this.prop] = val + 'px';

　　break;

　　}

　　}

　　Animate.prototype._animate = function() {

　　var that = this;

　　this.now = new Date();

　　this.diff = this.now - this.startTime;

　　if (this.diff > this.time) {

　　this._setStyle(this.to);

　　if (this.callback) {

　　this.callback.call(this);

　　}

　　clearInterval(this.timer);

　　return;

　　}

　　this.percentage = (Math.floor((this.diff / this.time) * 100) / 100);

　　this.val = (this.animDiff * this.percentage) + this.from;

　　this._setStyle(this.val);

　　}

　　Animate.prototype.start = function() {

　　var that = this;

　　this.startTime = new Date();

　　clearInterval(this.timer);

　　this.timer = setInterval(function() {

　　that._animate.call(that);

　　}, 4);

　　}

　　Animate.canTransition = function() {

　　var el = document.createElement('foo');

　　el.style.cssText = '-webkit-transition: all .5s linear;';

　　return !!el.style.webkitTransitionProperty;

　　}();

　　// 透明度渐变

　　function changeOpacity() {

　　// 透明度渐变 从1 - 0 渐变时间1000ms

　　var fx = 'opacity', from = 1, to = 0, time = 1000;

　　// 渐变完毕执行的回调函数

　　var callback = function() {

　　from = 0; to = 1;

　　new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton}).start();

　　}

　　// 实例化渐变函数

　　new Animate(demo, fx, {

　　from: from,

　　to: to,

　　time: time,

　　callback: callback

　　}).start();

　　}