Background image fading with jQuery

Question

I have a series of images that cycle through a slideshow as css background properties. The code below should also have them fade in and out via jQuery's fadeIn property, but for some reason it does not fade, and simply changes instead. Any ideas?

This is a follow up from a comment that was never solved. Fiddle here: http://jsfiddle.net/5fVZ7/6/

var images=new Array();
images[0]='http://s29.postimg.org/912bsm0mf/dataarancio.jpg';
images[1]='http://s27.postimg.org/y6tl17eb7/velocita.jpg';
var nextimage=0;
doSlideshow();

function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('.bkg')
    .css('background-image','url("'+images[nextimage++]+'")')
    .fadeIn(500,function(){
    setTimeout(doSlideshow,4000);
});
}

why do you want to reinvent the wheel? There are tons of examples online and even on stackoverflow to achieve same thing. — Mike Ross, Oct 29 '15 at 00:10
Possible duplicate of http://stackoverflow.com/questions/30388118/trying-to-make-multiple-background-images-cycle-through-a-slideshow-with-css-and — guest271314, Oct 29 '15 at 00:16
@MikeRoss If I had found a working solution that fit my guidelines I would have used it, thanks. This code is actually much simpler than others that I have found that achieve similar results. — Claire, Oct 29 '15 at 00:49
@Tom There are couple of [examples](http://stackoverflow.com/questions/18194401/fade-in-and-out-with-jquery-image-gallery) on this question and also look at this [website](http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/) and still if it doesnt work out than edit the question accordingly. — Mike Ross, Oct 29 '15 at 00:55
@MikeRoss Both of your links are to examples dealing with images defined in the html, this question deals with css background images that cover and are fixed, with html content rendered overtop. I appreciate your comments, but i believe i have sorted it out. Thanks — Claire, Oct 29 '15 at 01:03

score 0 · Answer 1 · answered Oct 29 '15 at 00:51

.fadein changes the opacity of the element, but you are making changes to the background image. Animations can only act on numeric values, there's no way for the browser to calculate a background image that is "between" image1 and image2. So instead, try overlaying the images as separate html elements and using fadein to control their visibility in sequence.

score 0 · Accepted Answer · answered Oct 29 '15 at 00:58

The answer is to wrap the if statement and css property changes in a fadeOut fucntion, like so:

var images=new Array();
images[0]='http://s29.postimg.org/912bsm0mf/dataarancio.jpg';
images[1]='http://s27.postimg.org/y6tl17eb7/velocita.jpg';
var nextimage=0;
doSlideshow();

function doSlideshow(){
  $('.bkg').fadeOut(500,function(){
    if(nextimage>=images.length){nextimage=0;}
    $('.bkg').css('background-image','url("'+images[nextimage++]+'")');
  });

  $('.bkg').fadeIn(500,function(){
    setTimeout(doSlideshow,4000);
  });
}

I think this piece of code is simpler and more effective than many others I've found that do the same thing, including the answer to the duplicate question posted in the comments.

Background image fading with jQuery

2 Answers2