How to Fade Out an element using Javascript

Question

I have a loading page that I used javascript to make. I would like to be able to fade-out the loading page as the index.html fades in. I understand this can easily be done with jQuery, but would like to not use jQuery since I have yet to use it on this site. I understand this may be a common question, but I have not been able to tailor other answers to my solution since most use jQuery.

I am thinking to edit the opacity of the loading element onReady. Or could I do this with simple CSS?

Javascript:

      function onReady(callback) {
          var intervalID = window.setInterval(checkReady, 1000);

          function checkReady() {
              if (document.getElementsByTagName('body')[0] !== undefined) {
                  window.clearInterval(intervalID);
                  callback.call(this);
              }
          }
      }
      function show(id, value) {
          document.getElementById(id).style.display = value ? 'block' : 'none';
      }
      onReady(function () {
          show('page', true);
          show('loading', false);
      });

HTML:

    <div id="loading">
      <div class="logo">
        <a href="index.html">Logo</a>
      </div>
      <span class="loading-center-cross"></span>
      <h3>Loading...</h3>
    </div>

    <div id="page">
.....
    </div>

I expect for the loading screen to fade to the index.html as previously described. Thanks for all the help!

`document.getElementsByTagName('body')[0]` is like asking if there's internet in the world or JS in the browser... was that really your intent? Even taggin this question with the tag jQuery? — Roko C. Buljan, Aug 29 '19 at 22:35
`Or could I do this with simple CSS` - yes, a css transition would work - by the way, the previous comment is alluding to the fact that one generally uses `document.body` rather than what you've use — Jaromanda X, Aug 29 '19 at 22:36
Just to clarify - so when the user loads your page you show your "loading screen" by default - when the page is loaded you fade out your sceen? What's taking so long to load that it needs a loading screen? Can you not just fade in your page when it loads? — Mathew Thompson, Aug 29 '19 at 22:39
Loading screens were common about 20 years ago and were abandoned because of the poor user experience. They much prefer progressive rendering. — RobG, Aug 29 '19 at 22:56
Is there a reason you are polling to see if the `body` element is defined instead of using something like the [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event) event or the [`load`](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) event? — Useless Code, Aug 30 '19 at 03:05

score 1 · Accepted Answer · answered Aug 29 '19 at 22:40

You can do this with CSS, using something like the following:

function onReady(callback) {
  var intervalID = window.setInterval(checkReady, 1000);

  function checkReady() {
    if (document.getElementsByTagName('body')[0] !== undefined) {
      window.clearInterval(intervalID);
      callback.call(this);
    }
  }
}

function show(id, value) {
  document.getElementById(id).classList.toggle('fade-in-out', value);
}

onReady(function () {
  show('page', true);
  show('loading', false);
});

And have the following CSS:

#page,
#loading {
  transition: opacity 1s;
}

.fade-in-out {
  opacity: 0;
  pointer-events: none;
}

That way, the show() function will toggle a class of fade-in-out based on value, and there will be a transition to 'fade' the div in and out, with an addition of pointer-events: none to make the div non-interactive whist transitioning.

How to Fade Out an element using Javascript

1 Answers1