How to make fadeOut effect with pure JavaScript

Question

I'm trying to make fade out effect for a div with pure JavaScript.

This is what I'm currently using:

//Imagine I want to fadeOut an element with id = "target" function fadeOutEffect() {  var fadeTarget = document.getElementById("target");  var fadeEffect = setInterval(function() {   if (fadeTarget.style.opacity < 0.1)   {    clearInterval(fadeEffect);   }   else   {    fadeTarget.style.opacity -= 0.1;   }  }, 200); } 

The div should fade out smoothly, but it immediately disappears.

What's wrong? How can I solve it?

jsbin

Answer 1

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>

Answer 2

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>