jQuery淡入淡出

Question

I have the following code:

Code:

$(document).ready(function(){
var header = $('body');

var backgrounds = new Array(
'url(/1.jpg)'
, 'url(/2.jpg)'
, 'url(/1.jpg)'

);

var current = 0;

function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 5000);

header.css('background-image', backgrounds[0]);
});

What can I add to the above code so there is a "smooth" transition between background images. I prefer not to use a plugin.

THANKS :)

Answer 1

You can fade it out, change the background and fade it back in:

function nextBackground() {
  current++;
  current = current % backgrounds.length;
  header.fadeOut(200, function(){
    header.css('background-image', backgrounds[current]);
    header.fadeIn(200);
  })
}

Answer 2

If you want to crossfade the slides, you can place a duplicate of the image on top and fade it out as the next slide changes underneath.

 $(document).ready(function(){ var image = $('.wrap'); var fader = $('.fader'); var backgrounds = new Array( 'url(http://placehold.it/480&text=Slide+1)' ,'url(http://placehold.it/480&text=Slide+2)' ,'url(http://placehold.it/480&text=Slide+3)' ); var current = 0; function nextBackground() { // Change the background image while // creating a duplicate of image and // fade it out fader.css('background-image', backgrounds[current]).fadeOut(function() { fader.css('background-image', '').show(); }); current++; current = current % backgrounds.length; image.css('background-image', backgrounds[current]); } setInterval(nextBackground, 2000); image.css('background-image', backgrounds[0]); }); 

 .wrap, .fader { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; background-repeat: no-repeat; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="fader"></div> </div>