jQuery-Animate-Enhanced (v2)

Revision 2 of this benchmark created on

Description

Performance comparison for: http://playground.benbarnett.net/jquery-animate-enhanced/

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="https://raw.github.com/benbarnett/jQuery-Animate-Enhanced/master/scripts/src/jquery.animate-enhanced.js">
</script>
<div id="animateme">
  Animate Me!
</div>
<script>
  $('#animateme').width(200);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
enhanced 2d
$('#animateme').clone().attr('id', '').addClass('animateme').insertAfter('#animateme').animate({
  left: '+=200px',
  width: 300
}, 500, function() {
  $(this).remove()
});
ready
enhanced 3d
$('#animateme').clone().attr('id', '').addClass('animateme').insertAfter('#animateme').animate({
  left: '+=200px',
  width: 300,
  useTranslate3d: true
}, 500, function() {
  $(this).remove()
});
ready
normal
$('#animateme').clone().attr('id', '').addClass('animateme').insertAfter('#animateme').animate({
  left: '+=200px',
  width: 300,
  avoidTransforms: true
}, 500, function() {
  $(this).remove()
});
ready
enhanced 2d leaveTransforms
$('#animateme').clone().attr('id', '').addClass('animateme').insertAfter('#animateme').animate({
  left: '+=200px',
  width: 300,
  leaveTransforms: true
}, 500, function() {
  $(this).remove()
});
ready

Revisions

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