Add fade effect change of background using jquery

Question

I have the following code:

$(document).ready(function() {

    var bgCounter = 0,
        backgrounds = [
           "images/2.png",
           "images/1.png",
           "images/3.png"
        ];

    function changeBackground()
    {
        bgCounter = (bgCounter+1) % backgrounds.length;
        $('#page').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');
        setTimeout(changeBackground,100000);
    }

    changeBackground();
    });

I need to add fade in/out effect, between background changes. Any guidance?

Answer 1

Just add this:

$('#page').fadeIn()

before

$('#page').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');

And this:

$('#page').fadeOut()

after it..

Answer 2

Try this one:

 $(document).ready(function() {
 var bgCounter = 0,
    backgrounds = [
       "images/2.png",
       "images/1.png",
       "images/3.png"
    ];

 function changeBackground()
 {
    bgCounter = (bgCounter+1) % backgrounds.length;
      $('#page').animate({
     opacity: 0
    }, 0).css({
          'background-image': 'url('+backgrounds[bgCounter]+')'
     }).animate({opacity: 1}, 1000);

 setTimeout(changeBackground,10000);
 }

 changeBackground();
 });

Demo: http://jsfiddle.net/nq7uE/8/