javascript - jQuery slumpmässigt fadeIn bilder


Jag har en behållare med många små bilder.

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

Jag satte opacitet till 0. (inte gömd) Sedan vill jag visa (fadeIn) en slumpmässig bild efter en halv sekund. till exempel 5:e, 1:a, 55:e ...

Några förslag, tack så mycket

Svar #1

prova detta

<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>

Svar #2

sätt ett id på varje bild, med ett nummermönster, och sedan tona en bild med ett slumpmässigt genererat id, med math.random från javascript

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