Question

When I have this code:

$("img").each(function(i) {
   $(this).delay(i*100).fadeIn('slow');
});

Which can be seen live here to give a better example of what it does…

… How can I make those images appear in a random order? That means not from top left to bottom right, but randomly like image 45, image 100, image 3, etc … ?

Answer 1

http://blog.staydecent.ca/entry/jquery-random-each

function randsort(c) {
    var o = new Array();
    for (var i = 0; i < c; i++) {
        var n = Math.floor(Math.random()*c);
        if( jQuery.inArray(n, o) > 0 ) --i;
        else o.push(n);
    }
    return o;
}

var e = $('div'); // The elements we're searching
var c = e.size(); // Total number of those elements
var r = randsort(c); // an array of the element indices in random order

$("div").each(function(i) {
    var e = $(this);
    e.fadeTo(0, 0.05);
    setTimeout(function(){
        e.fadeTo(250, 1);
    }, r[i]*10);
});