title: Fade in fade out in javascript
body: <p>I continue the work on: <a href="https://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript">https://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript</a></p>
  
  <p>What is the best way to detect if the fade in or fade out is completed before setting a new function. This is my way, but I guess there is a much better way?</p>
  
  <p>I added the alert's to make it easier for you to see.</p>
  
  <p>Why I want to do this is because: If one press the buttons before the for loop has finnished, the animation will look bad.</p>
  
  <p>I want the buttons to work only when the fadeing is completed.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
          &lt;div&gt;
          &lt;span id="fade_in"&gt;Fade In&lt;/span&gt; | 
          &lt;span id="fade_out"&gt;Fade Out&lt;/span&gt;&lt;/div&gt;
          &lt;div id="fading_div" style="display:none;height:100px;background:#f00"&gt;Fading Box&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var done_or_not = 'done';
  
  // fade in function
  function function_opacity(opacity_value, fade_in_or_fade_out) { // fade_in_or_out - 0 = fade in, 1 = fade out
      document.getElementById('fading_div').style.opacity = opacity_value / 100;
      document.getElementById('fading_div').style.filter = 'alpha(opacity='+opacity_value+')';
      if(fade_in_or_fade_out == 1 &amp;&amp; opacity_value == 1)
      {
          document.getElementById('fading_div').style.display = 'none';
          done_or_not = 'done';
          alert(done_or_not);
      }
      if(fade_in_or_fade_out == 0 &amp;&amp; opacity_value == 100)
      {
          done_or_not = 'done';
          alert(done_or_not);
      }
  
  }
  
  
  
  
  
  window.onload =function(){
  
  // fade in click
  document.getElementById('fade_in').onclick = function fadeIn() {
      document.getElementById('fading_div').style.display='block';
      var timer = 0;
      if (done_or_not == 'done')
      {
          for (var i=1; i&lt;=100; i++) {
              set_timeout_in = setTimeout("function_opacity("+i+",0)", timer * 10);
              timer++;
              done_or_not = 'not_done'
          }
      }
  };
  
  // fade out click
  document.getElementById('fade_out').onclick = function fadeOut() {
      clearTimeout(set_timeout_in);
      var timer = 0;
      if (done_or_not == 'done')
      {
          for (var i=100; i&gt;=1; i--) {
              set_timeout_out = setTimeout("function_opacity("+i+",1)", timer * 10);
              timer++;
              done_or_not = 'not_done'
          }
      }
  };
  
  
  
  }// END window.onload
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>