FadeIn/out-comparison rev01 (v2)

Revision 2 of this benchmark created on

Preparation HTML

<style>
    #test {
      position: relative;
      background-color: #274a78;
      color: #fff;
      width: 160px;
      height: 160px;
      margin: 24px auto;
    }
    #test p {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 160px;
      text-align: center;
      display: table;
    }
  </style>
fadeToggle by<br>
  <button id="jq">jQuery</button>
  <button id="tm">TweenMax</button>
  <button id="tl">TweenLite</button>
  <button id="vl">Velocity</button>

  <div id="test"><p>TEST</p></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>

Setup

var $div = $('#test'),
      $jqB = $('#jq'),
      $tmB = $('#tm'),
      $tlB = $('#tl'),
      $vlB = $('#vl');
    
    var isHidden = function() {
      return $div[0].style.display === 'none';
    };

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
$div.fadeIn(500);
$div.fadeOut(500);
ready
TweenMax
TweenMax.to('#test', 0.5, {
  autoAlpha: 1
});
TweenMax.to('#test', 0.5, {
  autoAlpha: 0
});
ready
TweenLite
TweenLite.to('#test', 0.5, {
  autoAlpha: 1
});
TweenLite.to('#test', 0.5, {
  autoAlpha: 0
});
ready
Velocity
Velocity($div, {
  opacity: 1
}, {
  duration: 500,
  display: 'block'
});
Velocity($div, {
  opacity: 0
}, {
  duration: 500,
  display: 'none'
});
ready

Revisions

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