jQuery se desvanecen al azar en imágenes

Question

Tengo un contenedor con muchas imágenes pequeñas.

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

Configuré la opacidad en 0. (sin ocultar) Entonces quiero mostrar una imagen aleatoria (fadeIn) después de medio segundo. por ejemplo 5to, 1ro, 55to ...

Cualquier sugerencia, muchas gracias

Answer 1

prueba esto

<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

coloque una identificación en cada imagen, con un patrón de números, y luego desvanezca una imagen con una identificación generada al azar, usando math.random de javascript

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

Answer 3

No está claro (para mí) si desea comenzar a desvanecerse después de medio segundo, o desvanecerse en medio segundo. Sin embargo, ir con desvanecimiento en después de medio segundo. Si quieres hacerlo de otra manera, simplemente ignora las cosas con setTimeout ()

La descripción general de lo que quiere hacer es:
Cree una función cuando se haya cargado la página que se llama después de medio segundo (setTimeout)
Esa función debería generar un número aleatorio, con el mínimo como 0 y el máximo como el número de elementos secundarios del elemento #container menos 1
Desvanece el elemento secundario del #container con el índice proporcionado por el número aleatorio.

Código Pusdo (Ha pasado mucho tiempo desde que hice algo con jQuery. O Javascript para el caso)

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

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

Answer 4

Si quiere desvanecer todas las imágenes en su lugar, no es necesario usar todas las cosas al azar, solo cicle y demore un número aleatorio entre 500ms y 1 segundo. Tienes que poner la función hide de todos modos. O con opacidad, use CSS animado.

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

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

});

no encontrarás nada más simple que eso, y con el mismo efecto

Answer 5

Usaría el número aleatorio generado para crear el atributo 'src' de la imagen y construir el selector jQuery en consecuencia:

setInterval ( showRandomImage, 500 );

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