jQuery fadeIn au hasard des images

essaye ça

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); } 

Ce n’est pas clair (pour moi) si vous voulez commencer à s’estomper après une demi-seconde, ou si vous y allez en fondu dans une demi-seconde. Cependant, aller avec fade in 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:
Créer une fonction appelée 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 l’instant)

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

Si vous souhaitez insérer toutes les images en fondu à la place, vous n’avez pas besoin d’utiliser toutes les options aléatoires, il suffit de cicler et de retarder un nombre aléatoire compris entre 500 ms et 1 seconde. Vous devez quand même mettre la fonction hide. Ou avec l’opacité, utilisez animate 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

J’utiliserais le nombre aléatoire généré pour créer l’atsortingbut ‘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'); }