title: jQuery fadeOut fadeIn problems
body: <p>Please look at <a href="http://jsfiddle.net/yXnWP/2/" rel="nofollow">http://jsfiddle.net/yXnWP/2/</a> and notice "View Recent Updates". Click that and notice how it transitions from Update to Register Form? Now continue doing that slowly and notice how the transition changes the 4th time about.  Here is the part of the code responsible for that. Please give me any advice, tips or suggestions that may solve this issue of the different transitions.</p>
  
  <p><strong>MY QUESTION IS: Why does it transition one way the FIRST 3 clicks, then after it does a different transition? Refresh and it starts with the first transition for the FIRST 3 clicks and switches... Why?</strong></p>
  
  <pre><code>                            &lt;div class='index-update-register-container'&gt;
                  &lt;button class='index-updates-register-link' value='FadeOut' onclick="fade('reg', 'upd', this);"&gt;View Recent Updates&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class='index-updates-container' id='upd'&gt;
                  Updates
              &lt;/div&gt;
              &lt;div class='index-register-container' id='reg'&gt;
                  &lt;form action='index.php' method='post'&gt;
                      Register Form
                  &lt;/form&gt;
              &lt;/div&gt;              
  
  
  &lt;/body&gt;
  &lt;script&gt;
  function fade(div_id_out, div_id_in, button) {
      if(button.value == 'FadeOut') {
          $('#'+div_id_out).fadeOut(500, function() {
          $('#'+div_id_in).fadeIn(500);
          });
          $(button).html("Register");
          button.value = 'FadeIn';
      }
      else {
          $('#'+div_id_out).fadeIn(500, function() {
          $('#'+div_id_in).fadeOut(500);
          });
          $(button).html("View Recent Updates");
          button.value = 'FadeOut';
      }
  }
  &lt;/script&gt;
  </code></pre>