Hi,

I have been looking for a way to get a background image on a site to randomly fade into another image from an array of images.

(for example: there are 5 images in the array and they randomly fade into each other every 10 seconds)

Has anyone done anything similiar to this before in jQuery?

Thanks in advance

I haven't done exactly what you're describing, but there's a couple of things you must understand in order to accomplish it. It should be noted that you can't fade background images, only IMG tags, or entire DIVs that have background-images on them. You can't just fade the background-image by itself.

1. To fade two images into another, they should be absolutely positioned in the same place. Either one is behind the other, which fades out, or else both fade in and out simultaneously (this is probably what you want if you don't know what order they'll be in).

2. You need to understand random numbers in JavaScript. Here is a guide I've found useful: Make JavaScript Math.random useful

Other than that, it is just a matter of hiding all of the images to begin with, revealing one randomly, placing a class on it to distinguish it, then choosing from the remaining items in the nodelist to determine which one to fade to. It is probably about an hour job to work out the problems...

Here's a snippet of code that may help you:

var images = $("#slide img:not(.active)");
var random = Math.floor(Math.random()*images.length);
$(images).eq(random).addClass("changeto");

This assumes that the image currently being displayed has a class of "active" on it, and the image being switched to gets a "changeto" class added to it. Of course, you actually have to do something with these two classes when you do your fade, then switch the active class in the callback, but that's another story...

nice one, ill have a look at doing it that way