How can I change this so the progressive fade-in/fade-out that is now commented out applies only to the background image and not the whole containing div?
In its current state the entire DIV along with all content is fading in/out along with the background image change, i simply need the crossfade or fadein/out to apply to the background images as they transition. I do understand why it's applying to the whole div, i just am not figuring out how to write it differently so its only affecting the background-image.
$(window).load(function() {
var i =0;
var images = [];
images[ 0 ] = 'images/image1.jpg';
images[ 1 ] = 'images/image2.jpg';
images[ 2 ] = 'images/image3.jpg';
images[ 3 ] = 'images/image4.jpg';
var image = $('#container');
//Initial Background image setup
image.css('background-image', 'url(images/image4.jpg)');
//Change image at regular intervals
setInterval(function(){
//image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
//image.fadeIn(1000);
//});
if(i == images.length)
i = 0;
}, 5000);
});
You can not fade out just the background image. Its an all or nothing kind of thing. You could put the image on another element beneath the current div using z-index and fade that in or out.