jQuery dissolvenza casuale in immagini

Question

Ho un contenitore con molte piccole immagini.

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

Ho impostato l'opacità su 0. (non hidding) Quindi voglio mostrare (fadeIn) un'immagine casuale dopo mezzo secondo. per esempio 5 °, 1 °, 55 ° ...

Eventuali suggerimenti, grazie mille

Answer 1

prova questo

<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

metti un id su ogni immagine, con un modello numerico, e poi sbiadisci un'immagine con un ID generato casualmente, usando math.random da javascript

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

Answer 3

Non è chiaro (per me) se vuoi iniziare a sbiadire dopo mezzo secondo, o dissolvenza in mezzo secondo. Tuttavia, andando con dissolvenza in dopo mezzo secondo. Se vuoi farlo diversamente, ignora le cose con setTimeout ()

La panoramica generale di ciò che vuoi fare è:
Crea una funzione quando la pagina è stata caricata e viene chiamata dopo mezzo secondo (setTimeout)
Quella funzione dovrebbe generare un numero casuale, con il minimo come 0 e il massimo come numero di figli dell'elemento #container meno 1
Dissolvenza del figlio di #container con l'indice fornito dal numero casuale.

Codice Pusdo (è da molto tempo che non faccio nulla con jQuery. O Javascript per quella materia)

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 invece vuoi sbiadire tutte le immagini, non c'è bisogno di usare tutte le cose casuali, basta scorrere e ritardare un numero casuale tra 500 ms e 1 secondo. Devi mettere la funzione nascondi comunque. O con l'opacità usa animate css.

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

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

});

non troverai nulla di più semplice di quello e con lo stesso effetto

Answer 5

Userei il numero casuale generato per creare l'attributo 'src' dell'immagine e costruire il selettore jQuery di conseguenza:

setInterval ( showRandomImage, 500 );

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