How do I fade out a div using pure JavaScript?

Question

I have the following code for a preloader on my site:

setTimeout(function() {
  document.getElementById("loader-wrapper").style.display = 'none';
}, 1250);

<div class="loader-wrapper" id="loader-wrapper">
  <div id="loading">
    <div class="loader"></div>
  </div>
</div>

Currently the div disappears after 1.25 seconds, but how do I make the loader-wrapper fade out after those 1.25 seconds (without using CSS or jQuery)?

Out of curiosity why do you want to avoid using CSS (I fully understand wanting to avoid jQuery), which has support for transitioning visibility, opacity, colours and any other properties with numerical property-values? — David Thomas, Jan 07 '18 at 23:33
@DavidThomas mostly because I have a lot of interfering CSS (my fault for borrowing CSS from my other projects) and I'd much rather use javascript then hunt down the interfering code — Owen Sullivan, Jan 07 '18 at 23:36
While it's your prerogative to do as you wish, I will point out that that approach is likely to cause you problems with the vast whorl of spaghetti at a later point. You'd be much better off untangling everything at the beginning, rather than the end (or any other point). — David Thomas, Jan 07 '18 at 23:39
Probably a duplicate of [*Fade element in and run a callback*](https://stackoverflow.com/questions/7721722/fade-element-in-and-run-a-callback), just reverse to fade out instead of in. There is also [*Fade element from specidied opacity to specified opacity?*](https://stackoverflow.com/questions/2060539/javascript-fade-element-from-specidied-opacity-to-specified-opacity) Once the element is fully faded, remove it (or set display:none). — RobG, Jan 07 '18 at 23:39
@DavidThomas if I were to do it using CSS, how would I? I tried using `visibility: visible;` and `opacity: 1;`, then `transition: visibility 1s, opacity 1s linear;` but that didn't change anything — Owen Sullivan, Jan 07 '18 at 23:42
You can't transition non-numeric properties; you could fade in using `opacity: 0;` and `opacity: 1`; but depending on what precisely you were needing to do you might also need to adjust `pointer-events`, or `height`/`width`; without more detail it's difficult to answer. — David Thomas, Jan 07 '18 at 23:44

Penny Liu · Answer 1 · 2020-05-11T07:16:57.817

Look into object.style.transition JavaScript syntax.

Here is a simplified running example of @Owen Sullivan's solution.

setTimeout(function() {
  var loader = document.getElementById("loader-wrapper");
  loader.style.transition = '.5s';
  loader.style.opacity = '0';
  loader.style.visibility = 'hidden';
}, 1250);

<div class="loader-wrapper" id="loader-wrapper">
  <div id="loading">
    <div class="loader">loader</div>
  </div>
</div>

Sergii Rudenko · Answer 2 · 2018-01-07T23:42:39.263

1

You can do it with using of inline styles on the loader element:

<script>
  setTimeout(function() {
    var el = document.getElementById("loader-wrapper");
    // 1s - time of the animation duration
    // set transition property for webkit browsers only
    el.style.WebkitTransition = 'opacity 1s ease-in-out;'
    el.style.opacity = '0';
  }, 1250);
</script>

JSbin link.

To set transition for all browsers you need to set all transition properties. You can get if from this question.

For more information and animation examples check this question.

edited Jan 07 '18 at 23:42

answered Jan 07 '18 at 23:31

Sergii Rudenko

2,603
1
22
24

I assume the element is a kind of overlay, so you would probably still want to set `display = 'none'` or remove the element from the DOM - otherwise it does still receive events and block the user from accessing content beneath it. – le_m Jan 07 '18 at 23:33
While I agree that using CSS, even when applied by JavaScript, is the better answer I'm not sure if it meets the OP's requirement of avoiding CSS (though I don't understand why the OP would want to). – David Thomas Jan 07 '18 at 23:34
Your code works, but not in my case because none of the underlying site content works after the timeout (because the div is at the top of and there's nothing to set its visibility to hidden). I answered with the code I used to make it work. – Owen Sullivan Jan 08 '18 at 23:40

score 0 · Answer 3 · answered Jan 08 '18 at 23:42

What ended up working for me:

<script>
  setTimeout(function() {
    var loader = document.getElementById("loader-wrapper");
    loader.style.WebkitTransition = 'visibility .5s, opacity .5s';
    loader.style.opacity = '0';
    loader.style.visibility = 'hidden';
  }, 1250);
</script>

This sets the visibility to hidden and allows all the content underneath the loader-wrapper div to be interacted with (in my case, buttons and forms).

How do I fade out a div using pure JavaScript?

3 Answers3