Jquery image fade effect
<p>I am using this code, but when it changes the image, the image fades out and then the other image fades in, meanwhile I can see the background color, I dont want to see the background color, is there any simple way to fade images but at the same time to fade in the next image, or another jquery effect like slide the images, its just that I dont want to see the background color:</p>

<pre><code>&lt;script type="text/javascript"&gt;
 $(document).ready(function(){
     var imgArr = new Array( // relative paths of images
        'css/images/main_img.jpg', 'css/images/main_img_2.jpg', 'css/images/main_img_3.jpg', 'css/images/main_img_4.jpg', 'css/images/main_img_5.jpg'            );

            var preloadArr = new Array();
            var i;

            /* preload images */
            for(i=0; i &lt; imgArr.length; i++){
             preloadArr[i] = new Image();
             preloadArr[i].src = imgArr[i];
            }

            var currImg = 1;
             var intID = setInterval(changeImg, 6000);
             $('#main_content').css('background','url(' + preloadArr[0].src +') top center no-repeat');//added this so that the first image is always the first from the array
             /* Main IMG */
             function changeImg(){
                 $('#main_content').animate({opacity: 0}, 1000, function(){
                 $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
                 }).animate({opacity: 1}, 1000);
                 }

 });
&lt;/script&gt;
</code></pre>
