JQuery FadeIn() Different Intervals With Multiple Div's

I have a homepage with six div's. They are different shaped boxes, and I want them to fade in at random intervals when the page loads. The javascript code is as follows: $(document

Solution 1:

Here's an example for you: http://jsfiddle.net/Paulpro/gTFsk/

Solution 2:

Create all divs with the same class like alldivs then:

$('.alldivs').each(function() {
    $(this).fadeIn(Math.floor(Math.random()*3000)).animate({opacity: 1.0});
});

Solution 3:

function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}
$('.six_div').each(function () {
    setTimeout(function () {
        $(this).animate({opacity: 1}, 2000);
    }, randomFromTo(100,3000));
});

NOTE: the 'six_div' class will need to be added to each of the six divs so they will all be selected.

Solution 4:

What you'll probably want to do is have all six divs have a similar class, so that you can target them all at once.

Here is a working example: http://jsfiddle.net/Akkuma/hadbz/