如何循环无限动画js答案

【问题标题】：how to loop infinite animate js如何循环无限动画js
【发布时间】：2013-11-12 13:53:32
【问题描述】：

我是 jQuery 的新手，并设法让滑冰圣诞老人从一侧到另一侧再返回动画，但我找不到循环播放它的方法

我查看了所有关于堆栈溢出的尝试示例，但我的经验不足阻止我调整代码以适应我的代码

            <div class="santa-r"></div>
            <div class="santa-l"></div>


<script type="text/javascript">

$(function(){
    $('.santa-l').delay(12600).animate({'right': '1800px'}, 5000);
    $('.santa-r').delay(3600).animate({'left': '1800px'}, 5000);
});

</script>


    .santa-r {
       display: block;
           overflow: hidden;
       position:absolute;
       z-index:2;
       background: url(../images/anim-santa-right.png) no-repeat;
       width: 430px;
           height: 500px;
           top: 132px;
           left: -1600px;
     }

     .santa-l {
       display: block;
           overflow: hidden;
       position:absolute;
       z-index:2;
       background: url(../images/anim-santa-left.png) no-repeat;
       width: 430px;
           height: 500px;
           top: 132px;
           right: -1600px;
      }

【问题讨论】：

标签： javascript jquery loops infinite-loop

【解决方案1】：

试试这个代码：

$(loop); //Call on ready

function loop(){
    $('.santa-r, .santa-l').removeAttr('style') //reset the initial position
    $('.santa-r').delay(3600).animate({'left': '1800px'}, 5000);
    $('.santa-l').delay(12600).animate({'right': '1800px'}, 5000, loop); //Add the loop function in callback
}

【讨论】：

【解决方案2】：

您可以尝试将您的代码包装在一个自称的函数中

var reAnimate = function(){
     $('.santa-l').delay(12600).animate({'right': '1800px'}, 5000);
     $('.santa-r').delay(3600).animate({'left': '1800px'}, 5000, reAnimate);
}

然后

$(document).ready( reAnimate );

【讨论】：

逻辑不错，但行不通。应该是 $(document).ready( reAnimate); 否则它不会等待 DOM 准备好和 $('.santa-l').delay(12600).animate({'right': '1800px'}, 5000, reAnimate); 否则你会遇到堆栈错误。