How to fade div out, change background image and fade in within a loop?

MeltingDog

I need to create my own image slider by changing the background image of a div. I have done this but want to add a fade in/out transition effect.

So far I have:

    var now = 0;
    var int = self.setInterval("changeBG()", 5000);
    var array = ["[[*HomeImage1]]", "[[*HomeImage2]]", "[[*HomeImage3]]", ];


    function changeBG(){
        now = (now+1) % array.length ;
        $('.heroslide').fadeOut(300).delay(1000).css('background-image', 'url("' + array[now] + '")');
        $('.heroslide').fadeIn(300);

    }

But try as I might I cannot get the transitions and css change to work in the right order.

Can anyone point me in the right direction?

somethinghere

You should try to use a recursive function:

var now = 0;
var int = self.setInterval("changeBG()", 5000);
var array = ["[[*HomeImage1]]", "[[*HomeImage2]]", "[[*HomeImage3]]", ];

function changeBG(){
    now = (now+1) % array.length ;
    // Fade out
    $('.heroslide').animate({opacity:0}, function(){
         // Change, fade in, trigger function after 5 seconds again.
         $('.heroslide')
             .css('background-image', 'url("' + array[now] + '")')
             .animate({opacity:1}, function(){
                 setTimeout(changeBG, 5000);
             });
    });
}

Now just call changeBG() once to start animating!

Collected from the Internet

Please contact [email protected] to delete if infringement.