title: fade in and fade out in pure javascript without jquery
body: <p>Here I have a function that fades a square box with <code>id="box"</code> as soon as the page loads. I tried but failed to find out how to fade in the box again or simply how to fade in a box or an element with pure JavaScript not jQuery. 
  Here is my code for <code>fadeOut()</code> function:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var box = document.getElementById('box');
  
  function fadeOut(elem, speed)
   {
  
   if(!elem.style.opacity)
   {
    elem.style.opacity = 1;
   }
   setInterval(function(){
  
   elem.style.opacity -= 0.02;
   
   }, speed /50);
  }
  
  fadeOut(box, 2000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box
  {
    width: 100px;
    height: 100px;
    background-color: blue;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Many thanks in advance to contributors. cheers</p>