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

also check value for `fadeTarget.style.opacity`, if you don't setup manually `style` - it empty — Grundy, Mar 12 '15 at 18:24
your jsbin show 9 error like: _Line 27: Expected a conditional expression and instead saw an assignment._ — Grundy, Mar 12 '15 at 18:31
hm, it shown on _javascript_ tab, methinks you add wrong link to old variant — Grundy, Mar 12 '15 at 18:33

Juan Mendes · Accepted Answer · 2020-04-08T19:21:54.600

103

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>

edited Apr 08 '20 at 19:21

answered Mar 12 '15 at 18:27

Juan Mendes

85,853
29
146
204

1

Additional: Why does the opacity stop at 0.1 but not 0? – Anakin Mar 12 '15 at 18:43
1

just change `fadeTarget.style.opacity < 0.1` to `fadeTarget.style.opacity == 0` – Moulaye Abderrahmane Sep 27 '16 at 11:03
@Anakin fixed, in this case, it's because I knew it started with 1, but it would fail if it started at .91 for example. – Juan Mendes Jun 01 '18 at 12:01
This snippet fails on undefined fadeTarget if you switch page during the execution. You should check for null fadeTarget before trying to access it. – Jean-Simon Collard May 23 '19 at 13:55
@Jean-SimonCollard Feel free to add checks that are necessary in your code, I'd rather not pollute the example and I specially don't like blanket null checks https://dzone.com/articles/why-i-never-null-check-parameters – Juan Mendes May 23 '19 at 14:08
dont forget to add a fadeTarget.style.display = 'none' with the else; to remove the div – Ewald Bos Dec 27 '19 at 19:17
1

@EwaldBos Not everyone wants it to stop occupying space. You may also just remove it from the DOM instead. – Juan Mendes Dec 29 '19 at 00:47
@JuanMendes true as well, just in case – Ewald Bos Dec 30 '19 at 11:58

score 31 · Answer 2 · answered Mar 12 '15 at 18:35

31

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>

answered Mar 12 '15 at 18:35

Lucas Ferreira

838
8
18

I much prefer the OP's code, looks like that vanilla-js is trying to win an obfuscation context. I love that website though – Juan Mendes Mar 12 '15 at 19:06
I would probably raher say a minifaction contest and in times where mobile internet speeds of 64 kbit/s and Lower is still common it's good to minify stuff. – My1 Feb 08 '18 at 11:58
4

@My1 Not to minify the stuff you post in answers, you let minifiers do that to production code – Juan Mendes May 18 '18 at 20:57
curious how you could re-write this to fade in? – drooh Nov 04 '21 at 03:23
Beautiful recursion! – Zeko Mar 22 '22 at 17:52

score 17 · Answer 3 · answered May 20 '19 at 11:48

17

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

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

answered May 20 '19 at 11:48

Alexander Tarasenko

582
6
15

1

CSS transition works, it even works better in real life. But, I wanted a pure javascript-based animation. – Anakin May 20 '19 at 16:11
1

Why @Anakin? CSS is far more efficient than JS timers. – Hannes Schneidermayer Jun 07 '21 at 14:24
This thread is old. Back then, I was doing this solely for learning-purposes. In practical uses, I don't see a reason this should be implemented over CSS transition either. – Anakin Jul 10 '21 at 10:08

score 6 · Answer 4 · answered Mar 12 '15 at 18:28

6

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

answered Mar 12 '15 at 18:28

Vikash

634
1
5
11

While a valid point, this should be a comment, the OP wants to know what is wrong with their code, it was very close to working – Juan Mendes Mar 12 '15 at 18:29
@JuanMendes :- i am new here. I dont have enough points to add comments. I can comment in my question and answer only. – Vikash Mar 12 '15 at 19:03

score 3 · Answer 5 · answered Feb 19 '21 at 22:15

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>

Alex Nolasco · Answer 6 · 2020-11-22T06:44:23.987

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>

FTW. 2022 and I hadn't heard of `animate()`! I love your use of `await` in a `for` loop to produce incredibly easy to read animation code. — Juan Mendes, Apr 13 '22 at 13:23

score 0 · Answer 7 · answered Sep 17 '21 at 12:26

my solution

function fadeOut(selector, timeInterval, callback = null) {

    var fadeTarget = document.querySelector(selector);

    let time = timeInterval / 1000;
    fadeTarget.style.transition = time + 's';
    fadeTarget.style.opacity = 0;
    var fadeEffect = setInterval(function() {

        if (fadeTarget.style.opacity <= 0)
        {
            clearInterval(fadeEffect);
            if (typeof (callback) === 'function') {
                callback();
            }
        }
    }, timeInterval);
}

How to make fadeOut effect with pure JavaScript

7 Answers7

Linked