jQuery fadeIn au hasard des 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>

Je règle l'opacité sur 0. (sans masquage) Ensuite, je veux montrer (fadeIn) image aléatoire après une demi-seconde. par exemple 5ème, 1er, 55ème ...

Toutes les suggestions, merci beaucoup

Answer 1

essayez ceci

<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

placez un identifiant sur chaque image, avec un motif de numéro, puis fondez une image avec un identifiant généré aléatoirement, à l'aide de math.random à partir de javascript

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

Answer 3

Il n’est pas clair (à mon avis) si vous souhaitez commencer à s’affaiblir au bout d’une demi-seconde ou s’allonger dans une demi-seconde. Cependant, aller avec le fondu entrant après une demi-seconde. Si vous voulez le faire autrement, ignorez simplement les choses avec setTimeout ()

L'aperçu général de ce que vous voulez faire est le suivant:
Créez une fonction appelée après une demi-seconde après le chargement de la page (setTimeout)
Cette fonction devrait générer un nombre aléatoire, avec le minimum égal à 0 et le maximum correspondant au 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 (Cela fait longtemps que je n’ai rien fait avec jQuery. Ou javascript pour cette question)

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 vous souhaitez insérer toutes les images en fondu à la place, vous n'avez pas besoin d'utiliser toutes les options aléatoires. entre 500ms et 1 seconde. De toute façon, vous devez mettre la fonction hide. Ou avec opacité, utilisez animate css.

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

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

});

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

Answer 5

J'utiliserais le nombre aléatoire généré pour créer l'attribut 'src' de l'image et construire le sélecteur jQuery en conséquence:

setInterval ( showRandomImage, 500 );

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