JQuery image rotator fading other divs

[bravo14]

Hi 

 

I have a jquery function that is rotating a number of images at the top of the page, the jquery function is below

 

<script language="javaScript" type="text/javascript">
            $(document).ready(function(){
                
                var imgArr = new Array( // relative paths of images
                'http://176.32.230.29/hmximages.co.uk/photos/5.jpg','http://176.32.230.29/hmximages.co.uk/photos/3.jpg','http://176.32.230.29/hmximages.co.uk/photos/4.jpg','http://176.32.230.29/hmximages.co.uk/photos/2.jpg','http://176.32.230.29/hmximages.co.uk/photos/1.jpg',                '_img/homepage/4.jpg'
                    );
                    
                var preloadArr = new Array();
                var i;
                
                /* preload images */
                for(i=0; i < imgArr.length; i++){
                    preloadArr[i] = new Image();
                    preloadArr[i].src = imgArr[i];
                }
                
                var currImg = 1;
                var intID = setInterval(changeImg, 6000);
                
                function changeImg(){
                    $('#header').animate({opacity: 0}, 1000, function(){
                        $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') bottom center no-repeat');
                    }).animate({opacity: 1}, 1000);
                }

            });
    </script> 

 

However when the background images fade in and out it also fades other items and div tags within the header container.

 

 

<div id="header">
<div id="navigation">
                <ul>
             <li><a href="http://176.32.230.29/hmximages.co.uk/" class="active">Home</a></li>
             <li><a href="http://176.32.230.29/hmximages.co.uk/#">Support</a></li>
             <li><a href="http://176.32.230.29/hmximages.co.uk/checkout.php?step=1">Checkout</a></li>
             <li><a href="http://176.32.230.29/hmximages.co.uk/cart.php?action=view">Cart</a></li>
<li><a href="http://176.32.230.29/hmximages.co.uk/profile.php">My Account</a></li>
             <li><a href="http://176.32.230.29/hmximages.co.uk/#">Contact</a></li>
            </ul>
</div>
<img src="files/image/logo.png"/>
<!-- end #header -->
</div>

 

How can I change this so that it only fades the background image and not the navigation and the logo image?