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

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

作为指导，而不是为你做所有的工作。

制作一个在鳍状肢之前调用的功能，将每个球设置在页面上的随机x-y起始位置。我建议给每个球提供同一类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（也许不会让随机数超过可以通过$(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;
}

小提琴here