animate js vs jquery

Benchmark created on

Preparation HTML

<style>
#a {
  width: 20px;
  height: 20px;
  position: absolute;
  border: 1px solid;
  top: 0;
  left: 0;
}
</style>
<div id="a">a</div><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
Animate JS
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;
    console.log(delta);
    console.log(start_value);
  var handle = setInterval(function() {
    frame++;
    var value = start_value + delta * frame;
//      console.log(value);
    object.style[property] = value + "px";
    if (value == end_value) {
      clearInterval(handle);
    }
  }, 1 / frame_rate);
}


animate(document.getElementById("a"),
        "top",
        0, 
        100,
        1000
        );
ready
Animate jQuery
$('#a').animate({top:100}, 1000);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.