jQueryのランダムなフェードイン画像

Question

小さな画像がたくさんあるコンテナを持っています。

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

不透明度を0に設定します（非表示ではありません） 次に、0.5秒後にランダム画像を表示（fadeIn）します。たとえば、5番目、1番目、55番目...

ご提案、ありがとうございました

Answer 1

これを試してください

<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

数値パターンを使用して各画像にIDを入力し、javascriptのmath.randomを使用して、ランダムに生成されたIDで画像をフェードします

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

Answer 3

0.5秒後にフェードインを開始するか、0.5秒後にフェードインするかは明確ではありません（私にとって）。ただし、半秒後に フェードインします。それ以外の場合は、setTimeout（）を使用したものを無視してください

やりたいことの概要は次のとおりです。
0.5秒後に呼び出されるページが読み込まれたときに関数を作成します（setTimeout）
この関数は、最小値を0、最大値を#container要素の子の数から1を引いた値である乱数を生成する必要があります
乱数によって提供されたインデックスで#containerの子をフェードします。

Pusdoコード（jQueryで何かをやったので久しぶりです。それについてはJavascript）

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

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

Answer 4

代わりにすべての画像をフェードインする場合は、ランダムなものをすべて使用する必要はありません。cicleだけで乱数を遅らせる必要があります 500ミリ秒から1秒の間。とにかく非表示機能を配置する必要があります。または、不透明度を使用して、アニメーションCSSを使用します。

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

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

});

あなたはそれより簡単なものを見つけることはなく、同じ効果があります

Answer 5

生成された乱数を使用して画像の「src」属性を作成し、それに応じてjQueryセレクターを構築します。

setInterval ( showRandomImage, 500 );

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