Javascript JQuery进入动画

我试图得到这样的效果：当我的页面加载时，我的div会一个接一个地飞进来。在飞行效果有效的那一刻，但一切都在同一时间飞行，我希望它来在一个接一个

我的代码如下所示：

        <script>
            function animateEnter( object ){
                object = $("#"+object);
                object.css("left","1000px");
                object.animate({
                    left: "0px"
                });
            }
        </script>


        <div id="1"></div>
        <script>
           animateEnter("1");
        </script>
        <div id="2"></div>
        <script>
           animateEnter("1");
        </script>
        <div id="3"></div>
        <script>
           animateEnter("1");
        </script>

函数animateEnter（对象）{
对象=$（“#”+对象）；
css（“左”，“1000px”）；
对象动画({
左：“0px”
});
}
动画短片（“1”）；
动画短片（“1”）；
动画短片（“1”）；

尝试使用

setTimeout

function animateEnter(object, time){
   setTimeout(function(){
       object = $("#"+object);
       object.css("left","1000px");
       object.animate({
          left: "0px"
       });
     },
     time
   );
}

这里是

试试看

var count=0;
var delay=1000;
function animateEnter( object ){
                object = $("#"+object);
                object.css("left","1000px");
                fly(object);
            }
function fly(object){
    count++;
    setInterval(function(){
        $(object).animate({
                    left: "0px"
                },delay);
        },(count*delay));

    }       

---

不需要处理超时或任何事情。只需使用

动画

的

回调

功能，如下所示：

HTML：

<div>DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div>
<div>DIV 4</div>
<div>DIV 5</div>

div {
    left: 1000px;
    position: relative;
}

$(document).ready(function () {
    AnimateNext($("div"), 0);
});

function AnimateNext(divs, next) {
    if (next === divs.length) 
        return;

    $(divs[next]).animate({
        left: "0px"
    }, function () {
        next++;
        AnimateNext(divs, next);
    });
}

JS：

<div>DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div>
<div>DIV 4</div>
<div>DIV 5</div>

div {
    left: 1000px;
    position: relative;
}

$(document).ready(function () {
    AnimateNext($("div"), 0);
});

function AnimateNext(divs, next) {
    if (next === divs.length) 
        return;

    $(divs[next]).animate({
        left: "0px"
    }, function () {
        next++;
        AnimateNext(divs, next);
    });
}

---

工作

感谢您的回复，但是没有任何东西仍然同时出现。setinterval函数似乎不工作。还有其他解决方案吗？感谢您的快速响应，但没有任何东西仍然同时出现。setinterval函数似乎不起作用。还有其他解决方案吗？@user3871965您是否在每个函数调用上传递了不同的

时间

？您的意思是增加时间变量？不，我没有让我试试。@Codious JR是的，它的意思是以毫秒为单位的时间，所以3秒=

time=3000

@Codious JR添加了JSFiddel以用优化的代码回答