jQuery: Simultaneously fadeIn + fadeOut
<p>I'm designing a small portfolio website for my friend and I am having difficulty trying to get the fadeIn + fadeOut effect to work properly. The images are sliding + fading, however, there is a long delay in between the fades and you can momentarily see the background. The slider I am using is based off of the following tutorial:</p>

<p><a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/" rel="nofollow">http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/</a></p>

<p>The only changes I have done to the original code is to add a caption to the images and (trying to add) a fade effect when the images slide.</p>

<p><strong>Javascript</strong></p>

<pre><code>$(".image_reel").fadeIn(500).delay(0).fadeOut(500);
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500);
    $(".image_reel").delay(0).fadeIn(500);
</code></pre>

<p><em>The code here can be found in the <code>rotate</code> function on the tutorial website.</em></p>

<p>So, as I stated above the code here is successfully fading and sliding the images, however, there is a delay where you can momentarily see the background.</p>

<p>Any help would greatly be appreciating as to how I can get one image to fade out while the other image is fading in <strong>at the same time</strong>.</p>
