javascript - 以随机顺序定位和循环对象

Question

我已经创建了 3 个球，我想运行一个循环，通过执行以下操作为它们设置动画：

1. 随机放置它们
2. 给他们一个起点
3. 给他们一段时间

这是小提琴链接：http: //jsfiddle.net/X3SVp/1/

Javascript

function flipper(){
    $('#ball_1').animate({
        "left": '-90',
    }, function(){
        $('#ball_1').animate({
            "left": '200',
        }, flipper());
    });
}

flipper();

HTML

<div id="ball_1">
</div>

<div id="ball_2">
</div>

<div id="ball_3">
</div>

CSS

#ball_1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #354390;
    left: 200px;
    position: absolute;
}

#ball_2{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #354390;
}

#ball_3{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #354390;
}

Answer 1

作为指导点，无需为您完成所有工作。

在 Flipper 之前创建一个函数，将每个球设置在页面上的随机 xy 起始位置。我建议给每个球相同的等级，ball这样你就可以做这样的事情

`$.('.ball').each(function(index, ball){
//do something with ball
});`

为此，您将需要 http://api.jquery.com/each/ http://api.jquery.com/css/ 和 javascript math.random() http://www.w3schools.com/jsref/jsref_random。 asp（也许不要让 random 超过您可以获得的可见页面的尺寸$(document).height() and $(document).width()）

也不要忘记，根据用例，它们可能需要绝对的 CSS 定位。

然后看看另一个你可以在这种情况下循环的函数，flipper它将循环穿过each()球并为随机距离设置随机方向的动画，并且可能根据你想要的再次返回。

Answer 2

像这样的东西怎么样：

JavaScript

function flipper() {
    $('.ball').each(function () {
        var rndm = Math.floor(Math.random() * 201);
        $(this).animate({
            "left": '-' + rndm
        }, function () {
            $('.ball').animate({
                "left": rndm
            }, flipper());
        });
    });
}

flipper();

HTML

<div id="ball_1" class="ball"></div>
<div id="ball_2" class="ball"></div>
<div id="ball_3" class="ball"></div>

CSS

#ball_1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #354390;
    left: 200px;
    position: relative;
}
#ball_2 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #354390;
    position: relative;
}
#ball_3 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #354390;
    position: relative;
}

在这里提琴