jQuery aleatoriamente imagens FadeIn

Question

Eu tenho um recipiente com um monte de pequenas imagens.

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

I definir a opacidade para 0. (não HIDDING) Então eu quero mostrar (fadeIn) imagem aleatória depois de meio segundo. por exemplo, 5, 1º, 55th ...

Todas as sugestões, agradecimentos muito

Answer 1

Tente este

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

colocar um id para cada imagem, com um padrão de número, e em seguida, desaparecer uma imagem com um ID gerado aleatoriamente, usando math.random de javascript

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

Answer 3

Não está claro (para mim) se você quer começar desaparecendo depois de meio segundo, ou fade in em meio segundo. No entanto, indo com fade in após meio segundo. Se você quiser fazê-lo de outra forma, apenas ignore o material com setTimeout ()

A visão geral do que você quer fazer é:
Criar uma função quando a página foi carregada que é chamado depois de meio segundo (setTimeout)
Essa função deve gerar um número aleatório, com o min como 0, eo máximo que o número de filhos do elemento #container menos 1 | Desaparecer a criança do #container com o índice fornecido pelo número aleatório.

código Pusdo (É um longo tempo desde que eu tenha feito nada com jQuery. Ou Javascript para que o assunto)

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

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

Answer 4

Se você quiser fade-in todas as imagens em vez disso, não há necessidade de usar todo o material aleatório, apenas ciclo e retardar um número aleatório entre 500ms e 1 segundo. Você tem que colocar hide função de qualquer maneira. Ou com opacidade uso animado css.

$('#container img').each(function(index) {

   $(this).delay( Math.random()*500+500 ).fadeIn();

});

Você não vai encontrar nada mais simples do que isso, e com o mesmo efeito

Answer 5

Gostaria de usar o número aleatório gerado para criar o atributo do image 'src' e construir o seletor jQuery em conformidade:

setInterval ( showRandomImage, 500 );

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