Question

I made a bit of code who fades out an image, change the src attribute, then fadeIn() the new image.
This works fine in Chrome, but not in FireFox.

Here’s the jQuery code:

var myInterval=setInterval(function(){myChanging()},5000);

function myChanging () {
    var newUrl = urlBaseBackground + currentIndex + ".jpg";
    var image = jQuery('#bckimg');
    image.fadeOut(1000, function () {
                    image.attr('src', newUrl);
                    image.fadeIn(1000);
                });
    currentIndex ++;
    if (currentIndex > totalCountBackgroundImages-1)
        currentIndex = 0;
}

In the body :

 <img id="bckimg" 
      style="position:fixed;width:100%;height:100%;left:0px;top:0px;z-index:-1;" 
      src="/back/0.jpg" />

FF changes the image when it is displayed, not between the fadein and out.
I tried a setTimeout before the '.attr("src"...' part but it didn’t work either.

Any clue anyone ?

EDIT : forgot to mention that I load all images with another function before launching the fades.

Answer 1

I think you should make a chained action:

image.fadeOut(1000).attr('src', newUrl).fadeIn(1000);

Or try the promise() function:

 image.fadeOut(1000);
 image.promise().done(function()
 {
    $(this).attr('src', newUrl).fadeIn(1000);
 });