jQuery zufällig FadeIn Bilder

Question

Ich habe einen Behälter mit vielen kleinen Bildern.

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

Ich habe Opazität auf 0 (nicht Hidding) Dann möchte ich (fadeIn) zufälliges Bild nach einer halben Sekunde zeigen. zum Beispiel 5., 1., 55. ...

Alle Vorschläge, thanx viel

Answer 1

try this

<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

been ID zu jedem Bild, mit einem Reihe-Mustern, und dann verblasst ein Bild mit einem zufälligen erzeugt id, unter Verwendung von JavaScript Math.random

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

Answer 3

Es ist nicht klar ist (für mich), wenn Sie nach einem halben Sekunde zu starten Verblassen oder verblassen in in einer halben Sekunde. Allerdings geht mit Fade in nach einem halben Sekunde. Wenn Sie es anders machen wollen, ignorieren Sie das Zeug mit setTimeout ()

Die allgemeine Übersicht, was Sie tun möchten, ist:
Erstellen Sie eine Funktion, wenn die Seite geladen ist, dass nach einer halben Sekunde (SetTimeout)
genannt wird Diese Funktion soll eine Zufallszahl, mit dem min als 0, und dem max als die Zahl der Kinder des #container Elements minus 1 | erzeugen Verblasst das Kind des #container mit dem Index durch die Zufallszahl geliefert wird.

Pusdo Code (Es ist lange her, seit ich etwas getan haben, mit jQuery. Oder Javascript für diese Angelegenheit)

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

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

Answer 4

Wenn Sie alle Bilder stattdessen in Fade-wollen, Theres keine Notwendigkeit, alle random stuff zu bedienen, einfach cicle und verzögern eine Zufallszahl zwischen 500 ms und 1 Sekunde. Sie haben sowieso verstecken Funktion setzen. Oder mit CSS animieren Opazität Verwendung.

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

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

});

Sie werden nicht nichts einfacher als das, und mit dem gleichen Effekt

finden

Answer 5

Ich würde die erzeugte Zufallszahl, um das Bild des ‚src‘ Attribut zu erstellen und den jQuery-Selektor bauen entsprechend:

setInterval ( showRandomImage, 500 );

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