Animate div

by Nofiden Noble

HTML

<div id='abc'>
</div>

CSS

#abc {
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript

function animate(id, styleAttr, finalValue, duration) {
	var ele = document.getElementById('abc'), 
  		startTime = +new Date, 
      delta = null, 
      req = null;
      
	(function timeout() {
    elapsedTime = +new Date - startTime;
    
    if(elapsedTime >= duration) {
    	cancelAnimationFrame(req);
      ele.style[styleAttr] = finalValue + 'px';
      return;
    }
    else {
      delta = finalValue / duration; 
    	ele.style[styleAttr] = delta * elapsedTime + 'px';
    }
    
    req = requestAnimationFrame(timeout);
  })();
}

animate('abc', 'marginLeft', 250, 1000);
setTimeout(function(){animate('abc', 'marginTop', 250, 1000)},1000);