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);
});
}

Answer 1

.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.

Answer 2

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.