Just add this:
$('#page').fadeIn()
before
$('#page').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');
And this:
$('#page').fadeOut()
after it..
Pregunta
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?
Solución 2
Just add this:
$('#page').fadeIn()
before
$('#page').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');
And this:
$('#page').fadeOut()
after it..
Otros consejos
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();
});