Question

我有一个有六个div的主页。它们是不同形状的盒子，我希望它们在页面加载时以随机间隔淡入。 javascript代码如下：

$(document).ready(function(){
    $("#topleft").fadeIn(2000).animate({opacity: 1.0});
});

当然，我需要将所有六个div作为目标，而不仅仅是一个，我希望它们在页面加载后大约3秒内随机淡入。我该怎么做？顺便说一句，我正在使用jQuery，因为我是新手，我可能会使用一些我不知道的东西。

Answer 1

以下是您的示例：http://jsfiddle.net/Paulpro/gTFsk/

Answer 2

创建具有相同类的所有div，例如alldivs：

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

Answer 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));
});

注意：需要将'six_div'类添加到六个div中的每一个中，以便全部被选中。

Answer 4

你可能想要做的是让所有六个div都有一个类似的类，这样你就可以一次定位它们。

以下是一个工作示例：http://jsfiddle.net/Akkuma/hadbz/

jQuery fadeIn（）具有多个div的不同间隔

4 个答案: