Show at random

Show at random

Hi,

I'm a JQuery beginner but I certainly would love to learn more about it.

I'm a bit stuck now with random timed animations. There are 3 images:

img1 img2 img3

button

When the page loads I want the 3 images to fade in randomly, so could be 1,2,3, could be 3,1,2 etc... all with different delays. So you get a *pop* *pop* *pop* effect. (Hope this makes sense.
When I click the button I want the 3 images to be replaced with 3 new ones 4, 5, 6, again, fading in randomly. The first 3 fade out first.

So far I got a fade in, fade out and replace for 1 image:

$(document).ready(function() {
      $("#imagebox").fadeIn(1500),
      $(document).ready(function() {
         $("#changeImage").click(function() {
            $("#imagebox").fadeOut(1500,function() {
                  $("#imagebox").css('display', 'none'),
                  $("#imagebox").html("<img src='http://farm1.static.flickr.com/159/345009210_1f826cd5a1.jpg?v=1167887287'>"),
                  $("#imagebox").fadeIn(1500);
            });
         });
      });
   });


I'll prob have to work with some arrays and such and I don't know if this is a big-ish question but any help would be appriciated.

Image