Vanilla JS Click, Delay, Fade

by Adrian Mejias

HTML

<ul>
  <li>not clicked</li>
  <li>not clicked</li>
</ul>

JavaScript

// $('li')
document.querySelectorAll('li').forEach(element => {
  // .on('click', ...)
  element.onclick = function(event) {
    var self = this;
    self.innerText = 'Clicked!';

    // .delay(800)
    window.setTimeout(() => {
      var opacity = 1;
      var interval = 50;
      var duration = 400;
      var gap = interval / duration;

      // .fadeOut(400)
      var fading = window.setInterval(() => {
        opacity = opacity - gap;
        self.style.opacity = opacity;

        if (opacity <= 0) {
          self.style.visibility = 'hidden';
        }
        if (opacity <= 0 || opacity >= 1) {
          window.clearInterval(fading);
        }
      }, interval);
    }, 800);
  };
});