How to make fadeOut effect with pure JavaScript

Question

I\'m trying to make fadeOut effect for a div with pure JavaScript.

This is what I\'m currently using:

//Imagin         


        

Answer 1

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>

Answer 2

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 3

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

Answer 4

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

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

Answer 5

In addition to the accepted answer, we now have WAAPI which basically adds animation API to JavaScript.

For example,

/**
 * @returns {Object}
*/
function defaultFadeConfig() {
  return {      
      easing: 'linear', 
      iterations: 1, 
      direction: 'normal', 
      fill: 'forwards',
      delay: 0,
      endDelay: 0
    }  
}

/** 
 * @param {HTMLElement} el
 * @param {number} durationInMs
 * @param {Object} config
 * @returns {Promise}
 */
async function fadeOut(el, durationInMs, config = defaultFadeConfig()) {  
  return new Promise((resolve, reject) => {         
    const animation = el.animate([
      { opacity: '1' },
      { opacity: '0', offset: 0.5 },
      { opacity: '0', offset: 1 }
    ], {duration: durationInMs, ...config});
    animation.onfinish = () => resolve();
  })
}

/** 
 * @param {HTMLElement} el
 * @param {number} durationInMs
 * @param {Object} config
 * @returns {Promise}
 */
async function fadeIn(el, durationInMs, config = defaultFadeConfig()) {
  return new Promise((resolve) => {         
    const animation = el.animate([
      { opacity: '0' },
      { opacity: '0.5', offset: 0.5 },
      { opacity: '1', offset: 1 }
    ], {duration: durationInMs, ...config});
    animation.onfinish = () => resolve();
  });
}

window.addEventListener('load', async ()=> {
  const el = document.getElementById('el1');  
  for(const ipsum of "Neque porro quisquam est qui dolorem ipsum quia dolor \uD83D\uDE00".split(' ')) {
    await fadeOut(el, 1000);  
    el.innerText = ipsum;
    await fadeIn(el, 2000);
  }
});

.text-center {
  text-align: center;
}

<h1 id="el1" class="text-center">...</h1>