FadeIn/out-comparison

Benchmark created by hoge 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="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://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'; },
          onFadeIn = function() { alert('onFadeIn'); },
          onFadeOut= function() { alert('onFadeOut'); };

Test runner

Ready to run.

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

Revisions

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