title: Smooth image fade out, change src, and fade in with jquery
body: <p>I am trying to do the following:</p>
  
  <p>On link click:</p>
  
  <p>1.) fade out an img</p>
  
  <p>2.) change the src of the now hidden image</p>
  
  <p>3.) when the img with the new src finishes loading, fade in</p>
  
  <p>Minimally, I'd like to see a smooth fade out of one image and a fade in of another (within the same img tag by changing the src)</p>
  
  <p>Eventually I'd like to:</p>
  
  <p>1.) fade out an img</p>
  
  <p>2.) show a animated gif "loading image"</p>
  
  <p>3.) change the src of the now hidden image</p>
  
  <p>4.) hide the animated gif "loading image"</p>
  
  <p>5.) when the img with the new src finishes loading, fade in</p>
  
  <p>Thanks.</p>
  
  <p>This is what I tried so far.  It seems to do a couple flashes but only after the src changes (prior to the fade out).  Strange behavior.</p>
  
  <pre><code>$("#Image").fadeOut();
  $("#Image").attr("src", NEW_IMAGE_SRC);
  $("#Image").fadeIn();
  </code></pre>
  
  <p><code>#Image</code> is an IMG tag</p>