javascript - 如何循环无限动画js

Question

我是 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;
      }

Answer 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
}

Answer 2

您可以尝试将您的代码包装在一个调用它自己的函数中

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

然后

$(document).ready( reAnimate );