1. Fade in and Fade Out

​

function fadeIn(element) {

  element.style.opacity = 0;

  let last = +new Date();

  let tick = function() {

    element.style.opacity = +element.style.opacity + (new Date() - last) / 400;

    last = +new Date();

    if (+element.style.opacity < 1) {

      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);

    }

  };

  tick();

}

​

function fadeOut(element) {

  element.style.opacity = 1;

  let last = +new Date();

  let tick = function() {

    element.style.opacity = +element.style.opacity - (new Date() - last) / 400;

    last = +new Date();

    if (+element.style.opacity > 0) {

      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);

    }

  };

  tick();

}

​

let element = document.getElementById("myElement");

fadeOut(element); // fade out the element

fadeIn(element); // fade in the element

​