fade a gallery of 9 thumbnails in randomly 1 at a time using jquery

I have 9 thumbnail images (3 x 3), on page load I want开发者_JAVA百科 to fade these images in randomly so maybe maybe image #4 fades in then 8 then 3...

At the moment Im trying to work out how this can be done, does a random number have to be generated for each image and then loop through each element adding the number to the .data attribute?

So far Ive managed to create a variable that generates a random number but not sure how I integrate the loop, http://jsfiddle.net/kyllle/MGW8k/

Kyle

See this working example: http://jsfiddle.net/wCb93/1/

The code for generating the number and fading in a new image are all contained within a single function. That allows this function to call itself after the image finishes fading in, thereby fading in the next image.

I've also stored the available index numbers for the .eq() method in an array. And, related to that, I've modified the random number generation so that it uses the length of this array rather than the length property of the group of img elements. This allows me to simply remove an item from that array and pass its value to the .eq() method. Since that item is no longer in the array, I don't have to worry about passing a value to .eq() that has already been faded in.

I also modified your CSS to give the images an opacity of 0 rather than having them display:none. These keeps their layout in place even when they aren't visible.