添加背景的淡入淡出效果改變使用jQuery

Question

我有以下代碼：

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

我需要添加/淡出效果淡入，背景變化之間。任何指導？

Answer 1

只需補充一點：

$('#page').fadeIn()

前

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

這：$('#page').fadeOut()

後

吧..

Answer 2

試試這個：

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

演示：http://jsfiddle.net/nq7uE/8/