JQuery输入动画

JQuery Entering Animation

本文关键字：动画 输入 JQuery      更新时间：2023-09-26

我试图得到的效果，当我的页面加载，我的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>

try

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

尝试使用setTimeout 

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

这里是JSFiddle

不需要处理超时或任何东西。只需像这样使用animate的callback函数:

: 

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

: 

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

JS : 

$(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);
    });
}

小提琴。

相关文章：