jQuery au hasard fadeIn images

Question

J'ai un conteneur avec beaucoup de petites images.

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

I définir l'opacité à 0. (non hidding) Je veux montrer (fadeIn) image aléatoire après une demi-seconde. par exemple 5, 1er, 55e ...

Toute suggestion, merci beaucoup

Answer 1

essayer cette

<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

mettre un identifiant à chaque image, avec un motif numérique, puis disparaître une image avec un identifiant généré au hasard, en utilisant les mathématiques. au hasard de javascript

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

Answer 3

On ne sait pas (pour moi) si vous voulez commencer la décoloration après une demi-seconde, ou se fanent dans une demi-seconde. Cependant, aller avec fondu dans après une demi-seconde. Si vous voulez le faire autrement, tout simplement ignorer les choses avec setTimeout()

L'aperçu général de ce que vous voulez faire est:
Créer une fonction lorsque la page est chargée qui est appelée après une demi-seconde (setTimeout
Cette fonction doit générer un nombre aléatoire, avec min comme 0 et max comme le nombre d'enfants de l'élément #container moins 1
Fondu de l'enfant du #container avec l'index fourni par le nombre aléatoire.

Code Pusdo (Il y a longtemps que je l'ai fait quoi que ce soit avec jQuery. Ou Javascript pour cette matière)

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

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

Answer 4

Je voudrais utiliser le nombre aléatoire généré à créer l'attribut « src » de l'image et de construire en conséquence le sélecteur jQuery:

setInterval (showRandomImage, 500); 

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

Answer 5

Si vous voulez fondu de dans toutes les images à la place, theres pas besoin d'utiliser toutes les choses au hasard, juste cicle et retarder un nombre aléatoire entre 500ms et 1 seconde. Vous devez mettre la fonction cacher de toute façon. Ou avec opacité, utilisez animer css.

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

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

}); 

vous ne trouverez rien de plus simple que cela, et avec le même effet