How to make fadeOut effect with pure JavaScript

How to make fadeOut effect with pure JavaScript

Initially when theres 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 its 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>

Just this morning I found this piece of code at http://vanilla-js.com, its 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>

How to make fadeOut effect with pure JavaScript

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

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

Leave a Reply

Your email address will not be published.