jQuery randomly fadeIn images

Question

I have a container with a lot of small images.

<div id="container">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
   ...
   <img src="100.jpg" />
</div>

I set opacity to 0. (not hidding) Then I want to show(fadeIn) random image after half second. for example 5th, 1st, 55th ...

Any suggestions, thanx a lot

Answer 1

put an id to each image, with a number pattern, and then fade a image with a random generated id, using math.random from javascript

function getImage(minim,maxim) {
    return "img" + Math.round(Math.random()*(maxim-minim)+minim);
}

Answer 2

It is not clear (to me) if you want to start fading after half a second, or fade in in half a second. However, going with fade in after half a second. If you want to do it otherwise, just ignore the stuff with setTimeout()

The general overview of what you want to do is:
Create a function when the page has loaded that is called after half a second (setTimeout)
That function should generate a random number, with the min as 0, and the max as the number of children of the #container element minus 1
Fade the child of the #container with the index supplied by the random number.

Pusdo code (It is a long time since I have done anything with jQuery. Or Javascript for that matter)

function onDocumentReady(){
    setTimeout(500, "fadeInRandom()");
}

function fadeInRandom(){    
    var numElements = $("#container").children().length;
    var randomElem = Math.random() * (numElements-1);
    $("#container").children()[randomElem].fadeIn();
}

Answer 3

try this

<script type="text/javascript">

//generate random number
var randomnumber=Math.floor(Math.random()*$("#container").children().length);
$(function() {
    //hide all the images (if not already done)
    $("#container > img").hide();

    //set timeout for image to appear (set at 500ms)
    setTimeout(function(){
       //fade in the random index of the image collection
       $("#container > img:eq(" + randomnumber + ")").fadeIn();
    }, 500);    
});
</script>

Answer 4

I would use the random number generated to create the image's 'src' attribute and build the jQuery selector accordingly:

setInterval ( showRandomImage, 500 );

function showRandomImage()
{
    var randNo = Math.floor(Math.random() * 101);
    $("#container > img[src=" + randNo + "'.jpg']")
                   .animate({opacity: 0}, 500).fadeIn('slow');
}