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).ready(function(){
    $("#topleft").fadeIn(2000).animate({opacity: 1.0});
});

Of course, I need all six div's to be targeted, not just one, and I want them to randomly fade in within about 3 seconds of the page load. How would I go about this? By the way, I am using jQuery and since I'm new at it, there may be something I could use that I don't know about.

回答1:

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

回答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});
});

回答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.

回答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/

来源：https://stackoverflow.com/questions/6769895/jquery-fadein-different-intervals-with-multiple-divs