Fade between looped background images using jQuery
- by da5id
I'm trying to get the background image of a legacy div (by which I mean it already has a background image, which I cannot control & thus have to initially over-write) to smoothly fade between new images indefinitely. Here's what I have so far:
var images = [
"/images/home/19041085158.jpg",
"/images/home/19041085513.jpg",
"/images/home/19041085612.jpg"
];
var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
counter++;
if (counter == images.length) {
counter = 0;
}
}, 2000);
Trouble is, it's not smooth (I'm aiming for something like the innerfade plugin).
EDIT: question originally said "and it's not indefinite (it only runs once through the array).", but Mario corrected my stupid naming error.
EDIT2: I'm now using Reigel's answer (see below), which works perfectly, but I still can't find any way to fade between the images smoothly.
All help greatfully appreciated :)
