title: jquery fade in callback not waiting
body: <p>im trying to make a div fade out and then have a second div fade in in its place but the callback for the second div to fade is doesn't seem to wait for the first to finish fading, in fact they both fade at the same time giving a cross fade effect father than a fade out and then in afterwards. heres the code:</p>
  
  <pre><code>$(document).ready(function () {
  
      //toggle story text
      $(function () {
          $("#imageGallery").scroll(function () {
  
              if ($(this).scrollLeft() &gt; 1000) {
  
                  $("#story2").fadeIn("300", function () {
                      $("#story1").fadeOut("300");
                  });
  
  
              } else {
  
                  $("#story1").fadeIn("slow");
                  $("#story2").fadeOut("slow");
              }
          });
  
      })
  
  });
  </code></pre>
  
  <p>and the page im using it in:</p>
  
  <p><a href="http://www.jonathantopf.com/imijstudio/" rel="nofollow">http://www.jonathantopf.com/imijstudio/</a></p>
  
  <p>any ideas why this is happening?</p>