Javascript 如何在不同时间增加多个元素的css最大值？

所以我一直试图让这个功能发挥作用，但一直给我带来麻烦

JsFiddle:

HTML:

<div class="container">

    <button>CLICK</button>

    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
    <div class="circle circle-4"></div>
    <div class="circle circle-5"></div>

</div>

$(document).ready(function(){
    $("button").click(function(){
        //move each circle down out of screen one at a time

        //then after about 3 seconds have them appear in the same spot they were initially in
    });
});

Javascript:

<div class="container">

    <button>CLICK</button>

    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
    <div class="circle circle-4"></div>
    <div class="circle circle-5"></div>

</div>

$(document).ready(function(){
    $("button").click(function(){
        //move each circle down out of screen one at a time

        //then after about 3 seconds have them appear in the same spot they were initially in
    });
});

我的目标：

<div class="container">

    <button>CLICK</button>

    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
    <div class="circle circle-4"></div>
    <div class="circle circle-5"></div>

</div>

$(document).ready(function(){
    $("button").click(function(){
        //move each circle down out of screen one at a time

        //then after about 3 seconds have them appear in the same spot they were initially in
    });
});

• 你点击按钮
• 第一个圆圈一直下降到看不见的地方 另外，大约相隔1秒，圆圈2下降，然后1秒后下降 循环3，以此类推，直到所有的循环不再可见
• 然后，在每个圆圈下降约3秒钟后，它们再次出现 在他们最初开始的同一个确切位置

---

我想您正在寻找

设置超时（function（）{}，毫秒）

---

您可以了解更多信息。

类似的内容会让您开始学习。通过在循环中使用索引，可以增加动画延迟

$("button").click(function(){
    var top =$(window).height(),// amount to offset
        $circles = $('.circle'),
        numCircles = $circles.length;

    $circles.each(function(i, elem){
        var $circ = $(this);
        // store intial start point
        $circ.data('top', $circ.position().top);
        // increment delay for drop
        $circ.delay(i*1000).animate({top:top}, function(){
            // increment delay to return
            $circ.delay( (i+numCircles) * 1000).animate({top:$circ.data('top')});
        });            
    });           
});

---

除此之外，他还可以申请动画或伟大的代码！jquery的每个方法都非常干净。但是有一个问题，你能解释一下这个部分吗我知道position（）是一个jquery方法，它获取匹配元素的坐标，但是什么是

。top

top是position（）的y坐标。。。。返回的属性是

左

和

顶

切换数学。你有一个总人数的工作