JQuery fadeIn/fadeOut image on click jumps while loading new image
<p>There's a gallery with a large image with thumbnails on the side. Click the thumbnail, the large image fades out, new one fades in (src getting called from the rel attribute of the link). </p>

<p>Problem: The old image fades out, re-appears, then jumps to the new image... I'm guessing the new image hasn't loaded yet, since it only happens the first time the image is loaded.</p>

<hr>

<p>HTML</p>

<pre><code>&lt;div id="image"&gt;&lt;img src="http://marilynmcaleer.com/images/BeachRoad-title.jpg" width="480" height="383" /&gt;&lt;/div&gt;
&lt;div id="thumbnails"&gt;
    &lt;div class="thumbnail-homes"&gt;&lt;a href="#" rel="http://marilynmcaleer.com/images/BeachRoad-title.jpg" class="image"&gt;&lt;img src="http://marilynmcaleer.com/thumbnails/homeportrait_thumbs/BeachHouse_thumb.jpg" width="136" height="90" alt="Beach House" /&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="thumbnail-nudes"&gt;&lt;a href="#" rel="http://marilynmcaleer.com/images/ReducedFigure-title.jpg" class="image"&gt;&lt;img src="http://marilynmcaleer.com/thumbnails/nude thumbs/reducedfigure_thumb.jpg" width="136" height="90" alt="Patience" /&gt;&lt;/a&gt;&lt;/div&gt;

    &lt;div class="thumbnail-murals"&gt;&lt;a href="#" rel="http://marilynmcaleer.com/images/BabyElephant-title.jpg" class="image"&gt;&lt;img src="http://marilynmcaleer.com/thumbnails/mural thumbs/babyelephant_thumb.jpg" width="136" height="90" alt="Baby Elephant" /&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="thumbnail-paintings"&gt;&lt;a href="#" rel="http://marilynmcaleer.com/images/Charlevox-title.jpg" class="image"&gt;&lt;img src="http://marilynmcaleer.com/thumbnails/homeportrait_thumbs/Charlevouix_thumb.jpg" width="136" height="90" alt="Boat Shed" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="clear"&gt;&lt;/div&gt;
</code></pre>

<p>JQuery</p>

<pre><code>    $(function() {
        $(".image").click(function() {                  // something with class "image" gets clicked and a function happens
            var image = $(this).attr("rel");                // variable (image) is defined to be the rel attribute of the link that was clicked
            $('#image img').hide();                             // hides the old big image
            $('#image img').attr('src', image);
            $('#image img').fadeIn();                       // animate to fade in 
        return false;
    });
});
</code></pre>

<p>Live Site: <a href="http://marilynmcaleer.com/" rel="nofollow">http://marilynmcaleer.com/</a></p>

<hr>

<p>Any idea how to fix this?</p>
