title: How to Fade Out an element using Javascript
body: <p>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.</p>
  
  <p>I am thinking to edit the opacity of the loading element onReady. Or could I do this with simple CSS?</p>
  
  <p>Javascript:</p>
  
  <pre><code>      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);
        });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="loading"&gt;
        &lt;div class="logo"&gt;
          &lt;a href="index.html"&gt;Logo&lt;/a&gt;
        &lt;/div&gt;
        &lt;span class="loading-center-cross"&gt;&lt;/span&gt;
        &lt;h3&gt;Loading...&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div id="page"&gt;
  .....
      &lt;/div&gt;
  </code></pre>
  
  <p>I expect for the loading screen to fade to the index.html as previously described. Thanks for all the help!</p>