How to make fadeOut effect with pure JavaScript

you can use CSS transition property rather than doing vai timer in javascript. thats more performance oriented compared to what you are doing.

check

http://fvsch.com/code/transition-fade/test5.html#test3

Just this morning I found this piece of code at http://vanilla-js.com, it's very simple, compact and fast:

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

You can change the speed of the fade changing the second parameter in the setTimeOut function.

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

#thing {
  background: red;
  line-height: 40px;
}

<div id="thing">I will fade...</div>

Initially when there's no opacity set, the value will be an empty string, which will cause your arithmetic to fail. That is, "" < 0.1 == true and your code goes into the clearInterval branch.

You can default it to 1 and it will work.

function fadeOutEffect() {
    var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        } else {
            clearInterval(fadeEffect);
        }
    }, 200);
}

document.getElementById("target").addEventListener('click', fadeOutEffect);

#target {
    height: 100px;
    background-color: red;
}

<div id="target">Click to fade</div>

An empty string seems like it's treated as a 0 by JavaScript when doing arithmetic and comparisons (even though in CSS it treats that empty string as full opacity)

> '' < 0.1
> true

> '' > 0.1
> false


> '' - 0.1
> -0.1

Simpler Approach We can now use CSS transitions to make the fade out happen with a lot less code

const target = document.getElementById("target");

target.addEventListener('click', () => target.style.opacity = '0');
// If you want to remove it from the page after the fadeout
target.addEventListener('transitionend', () => target.remove());

#target {
    height: 100px;
    background-color: red;
    transition: opacity 1s;
}

<p>Some text before<p>
<div id="target">Click to fade</div>
<p>Some text after</p>

It looks like you can do it another way(I may be wrong).

event.target.style.transition = '0.8s';
event.target.style.opacity = 0;