title: How to make a div fade out instead disappearing using code like this? (JavaScript)
body: <p>I made a <code>div</code> and a <code>button</code>. Made a function that changes the opacity of the <code>div</code> in JavaScript.<br>
  Then I made an <code>array</code> of opacities and a <code>for</code> loop and kept the opacity that I want on each loop. But I don't know what is wrong?<br>
  Please don't give me suggestions like I should use jQuery or some other library. I want to do it in JavaScript!(without any library)<br>
  Here see my code:-  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="icon" type="image/jpg" href="http://s3images.coroflot.com/user_files/individual_files/original_240004_eFk2sUc1K3KyXWz60vHrALo5H.jpg"&gt;
      &lt;title&gt;JavaScript&lt;/title&gt;
      &lt;style&gt;
          body
          {
              font-family:ebrima;
              color:black;
          }
          #box
          {
              height:100px;
              width:100px;
              background:red;
              opacity:1;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  
  &lt;body id="mainBody"&gt;
  
      &lt;div id="box"&gt;&lt;/div&gt;
  
  
      &lt;button type="button" id="b" onClick="lessTheOppacity()"&gt;OPACITY&lt;/button&gt;
  
  
      &lt;script&gt;
      function lessTheOppacity()
      {
          var box = document.getElementById("box");
          var oppArray = ["0.9", "0.8", "0.7", "0.6", "0.5", "0.4", "0.3", "0.2", "0.1", "0"];
  
          for (var x = 0; x &lt; 10;x++)
          {
              box.style.opacity=oppArray[x];
          }
      }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>