title: Pure JavaScript fade in and out - fade in not working
body: <p>See below snippet. Fade out works fine, but any idea why it won't fade in?</p>
  
  <p>My HTML: </p>
  
  <pre><code>  &lt;div id="id10574"&gt;&lt;span style="font-size:6em"&gt;♥&lt;/span&gt;&lt;/div&gt;
    &lt;button id="b1"&gt;Fade Out&lt;/button&gt;
    &lt;button id="b2"&gt;Fade In&lt;/button&gt;
    &lt;script src="fade.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and the JS:</p>
  
  <pre><code>var cat = document.getElementById("id10574");
  
  cat.style.opacity = 1;
  
  function fadeout() {
      if (cat.style.opacity &gt; 0) {
          cat.style.opacity = (cat.style.opacity - 0.01);
          setTimeout( fadeout, 10 );
      } else { 
  
      }
  }
  
  
  function fadein() {
      if (cat.style.opacity &lt; 1) {
          cat.style.opacity = (cat.style.opacity + 0.01);
          setTimeout( fadein, 10 );
      } else { 
  
      }
  }
  
  document.getElementById("b1").addEventListener("click", fadeout , false);
  document.getElementById("b2").addEventListener("click", fadein , false);
  </code></pre>
  
  <p>I'm really stumped on this one. Trying to make a simple effect that will work on IE8 (Sharepoint in corporate environment).</p>
  
  <p>Thanks!</p>