javascript: fadeIn and fadeOut | Michele Pisani

FadeIn and fadeOut in pure Javascript

by Michele Pisani

HTML

<div id="container"><div id="target">www.michelepisani.it</div></div>
<div id="buttons_container">
<button onclick="fadeInFunc()">Fade IN</button>
<button onclick="fadeOutFunc();">Fade OUT</button>
</div>

CSS

#container {border:solid 1px #000;float:left}
#buttons_container {padding:20px;float:left;}
#target {padding:20px;}

JavaScript

function fadeInFunc() {
  var el = document.getElementById("target");
  el.style.opacity = 0; 
  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.01;
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };
  tick();
}

function fadeOutFunc() {
  var el = document.getElementById("target");
  el.style.opacity = 1; 
  var tick = function() {
    el.style.opacity = +el.style.opacity - 0.01;
    if (+el.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };
  tick();
}