Pesquisa de site

javascript - jQuery desaparecer aleatoriamente imagens com fadeIn


Eu tenho um recipiente com muitas pequenas imagens.

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

Eu defini a opacidade para 0. (não escondendo) Então eu quero mostrar (fadeIn) uma imagem aleatória após meio segundo. por exemplo 5ª, 1ª, 55ª ...

Alguma sugestão, muito obrigado

Resposta #1

tente isso

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

Resposta #2

atribua um id a cada imagem, com um padrão numérico, e então faça uma imagem desaparecer com um id gerado aleatoriamente, usando math.random do javascript

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