Question

How do i run an animation(like changing CSS properties) in native javascript without using jQuery library’s animate method??
I have tried jQuery library animate and the framerate interval changes to make my animation fluid.
Thanks in advance

Answer 1

Here is an example:

http://jsfiddle.net/4M3ts/1/

function animate(object, property, start_value, end_value, time) {
  var frame_rate = 0.06; // 60 FPS
  var frame = 0;
  var delta = (end_value - start_value) / time / frame_rate;
  var handle = setInterval(function() {
    frame++;
    var value = start_value + delta * frame;
    object.style[property] = value + "px";
    if (value == end_value) {
      clearInterval(handle);
    }
  }, 1 / frame_rate);
}

animate(document.getElementById("a"), "top", 0, 100, 1000);