jQuery zufällig fadeIn Bilder

Question

Ich habe einen Container mit vielen kleinen Bildern.

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

I gesetzt Opazität auf 0 (nicht Hidding) Dann zweit Ich möchte zeigen (fadeIn) zufälliges Bild nach der Hälfte. zum Beispiel 5., 1., 55. ...

Anregungen, thanx viel

Answer 1

versuchen diese

<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

stellen eine ID für jedes Bild, mit einer Reihe Muster, und dann ein Bild mit einer zufällig generierte ID verblassen, Mathematik verwenden. zufällig aus Javascript

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

Answer 3

Es ist (für mich) nicht klar, ob Sie nach einer halben Sekunde starten wollen Verblassen oder in einer halben Sekunde blendet. Allerdings mit Fade in nach eine halbe Sekunde gehen. Wenn Sie es anders machen wollen, nur das Zeug mit setTimeout ignorieren()

Der allgemeine Überblick darüber, was Sie tun möchten, ist:
eine Funktion erstellen, wenn die Seite geladen ist, dass nach einer halben Sekunde (SetTimeout genannt wird)
Diese Funktion sollte eine Zufallszahl erzeugen, mit dem Min als 0 und dem Max als Anzahl der Kinder des #container Elements minus 1
Fade das Kind des #container mit dem Index von der Zufallszahl geliefert.

Pusdo Code (Es ist lange her, seit ich etwas getan haben, mit jQuery. Oder Javascript was das betrifft)

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

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

Answer 4

ich die erzeugte Zufallszahl verwenden würde Erstellen Sie das 'src'-Attribut des Bildes und bauen Sie den jQuery-Selektor entsprechend auf:

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

Wenn Sie ausblenden möchten- in allen Bildern, stattdessen ist es nicht notwendig, all die zufälligen Sachen zu verwenden, nur cicle und eine zufällige Zahl zwischen 500ms und 1 Sekunde zu verzögern. Sie müssen die Versteckfunktion trotzdem einstellen. Oder benutze animated css mit opacity.

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

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

}); 

Sie werden nicht nichts einfacher als das finden, und mit der gleichen Wirkung