Multiple Image Fade In/Out
<p>I have about 20 different images that I want to fade in and out in 4 boxes. I need it to randomally select an image from the list of images and display it.</p>

<p>Box example photo1, photo2, photo3, photo4 are their names. They need to be individually named as they absolute positioned.</p>

<pre><code>    &lt;div id="photo1"&gt;
    &lt;img src="images/photo.jpg" width="300" height="300" /&gt;
    &lt;img src="images/photo2.jpg" width="300" height="300" /&gt;
    &lt;img src="images/photo3.jpg" width="300" height="300" /&gt;
    &lt;img src="images/photo4.jpg" width="300" height="300" /&gt;
    &lt;img src="images/photo5.jpg" width="300" height="300" /&gt;
    &lt;/div&gt;
</code></pre>

<p>jquery so far</p>

<pre><code>&lt;script type="text/javascript"&gt;

//generate random number
var randomnumber=Math.floor(Math.random()*$("#photo1").children().length);
$(function() {
    //hide all the images (if not already done)
    $("#photo1 &gt; img").hide();

    //set timeout for image to appear (set at 500ms)
    setTimeout(function(){
       //fade in the random index of the image collection
       $("#photo1 &gt; img:eq(" + randomnumber + ")").fadeIn();
    }, 500);       
});
&lt;/script&gt;
</code></pre>
