Question

I am using this code. When it changes the image, the image fades out and then the other image fades in, and in the meanwhile I can see the background color, which I don’t want to see. Is there any simple way to fade images but at the same time fade in the next image, or another jQuery effect like slide the images? I just don’t want to see the background color.

<script type="text/javascript">
$(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 < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

    var currImg = 1;
    var intID = setInterval(changeImg, 6000);
    //added this so that the first image is always the first from the array
    $('#main_content').css('background','url(' + preloadArr[0].src +') top center no-repeat');
    /* 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);
    }
});
</script>

Answer 1

Since you are changing the css background you can’t do this against a single element.

You could achieve this with another div which would hold the next background image (before your content fades out) and would be put under your #main_content element using none static css position states and z-index property.