javascript - jQuery 随机淡入图像

Question

我有一个容器，里面有很多小图片。

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

我将不透明度设置为 0。(不隐藏)然后我想在半秒后显示(淡入)随机图像。例如第 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>