JQuery animated background affecting content floated above it
<p>I've set up a jQuery animation to change background image on a div at the header of a site.</p>

<p>The image is larger than its container, and when animating this causes (for the duration of the animation) the elements around it to be hidden briefly.</p>

<p>I've probably missed something obvious, can anyone help?</p>

<p>jQuery below and example here:</p>

<p>(example now removed, but can be replicated by animating the background image of a div with another div (with background) floated over the top)</p>

<pre><code>var currentBackground = 1;

function changeHeader() {
currentBackground++;
    if (currentBackground&gt;6) currentBackground = 1;

        jQuery('.slider').fadeOut(1000,function() {
            jQuery('.slider').css('background', 'url(\'/myurl/images/sliders/home- slide'+currentBackground+'.jpg\') no-repeat center');
            jQuery('.slider').fadeIn(1000);
    });

    setTimeout(changeHeader,10000);
}


jQuery(document).ready(function($){
   setTimeout(changeHeader,10000);
})
</code></pre>
