FadeIn / FadeOut Example/Idear with PLAIN JavaScript

by pleinx

HTML

<button id="fadeIn">Test .fadeIn()</button>
<button id="fadeOut">Test .fadeOut()</button>
<div id="test" style="opacity: 0">Example String</div>

CSS

div {
  font-size: 300%;
}

JavaScript

var fadeInBtn = document.getElementById('fadeIn');
fadeInBtn.addEventListener('click', function() {
  var testString = document.getElementById('test');
  fadeIn(testString, 30);
});

var fadeOutBtn = document.getElementById('fadeOut');
fadeOutBtn.addEventListener('click', function() {
  var testString = document.getElementById('test');
  fadeOut(testString, 60);
});



function fadeIn(element, speed) {
  var interval = setInterval(function () {
    
    var opacity = parseFloat(element.style.opacity);
    if(opacity >= 1.0) {
       clearInterval(interval);
    }

    element.style.opacity = opacity + 0.1;
  }, speed);
};

function fadeOut(element, speed) {
  var interval = setInterval(function () {
    
    var opacity = parseFloat(element.style.opacity);
    if(opacity <= 0) {
       clearInterval(interval);
    }

    element.style.opacity = opacity - 0.1;
  }, speed);
}