hoax, если несколько анимаций на странице могу предложить расширенную версию animate
function animate(opts){
var start = new Date();
var timer = setInterval(function (){
var progress = (new Date - start)/opts.duration;
if(progress > 1)progress = 1;
opts.step(opts.delta(progress));
if(progress == 1){
clearInterval(timer);
opts.compleat && opts.compleat(opts.elem);
};
},opts.delay || 40);
return timer;
}
function Prop(opts){
opts.step = function (prog){
var value;
for(var i = opts.prop.length;i--;){
value = opts.start[i] + ((opts.value[i] - opts.start[i] )*prog);
opts.elem.style[opts.prop[i]] = value+ opts.units;
};
}
if (!opts.delta) {
opts.delta = function (progress){
return progress;
}
}
return animate(opts);
}
/*
анимация нескольких свойств:
-можно анимировать несколько свойств ['opacity','width']
тогда start передается так [0,100](100 - начальное значение ширины) , а value так [1,500](500 - конечное значение ширины)
*/
Prop({
elem:document.getElementById('testBlock'),//элемент на котором происходит анимация
start:[0,0],// начальное значение
value:[100,300],// конечное значение
prop:['top','left'],// свойство анимации
duration:2000,// время анимации
units:'px',//единицы измерение px || % || ''-без единици измерения
delta: function (progress) {// НЕ обязательные параметр задающий вид анимации
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2)
}
}
}
});