Javascript 如何循环无限动画js

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

$（函数（）{
$（'.santa-l'）.delay（12600）.animate（{'right'：'1800px'}，5000）；
$（'.santa-r'）.delay（3600）.animate（{'left'：'1800px'}，5000）；
});
圣r{
显示：块；
溢出：隐藏；
位置：绝对位置；
z指数：2；
背景：url（../images/anim santa right.png）不重复；
宽度：430px；
高度：500px；
顶部：132px；
左：-1600px；
}
圣诞老人{
显示：块；
溢出：隐藏；
位置：绝对位置；
z指数：2；
背景：url（../images/anim santa left.png）不重复；
宽度：430px；
高度：500px；
顶部：132px；
右：-1600px；
}

您可以尝试将代码包装到一个调用其自身的函数中

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

然后

请尝试以下代码：

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

---

逻辑是好的，但行不通。应为<代码>$（文件）。准备就绪（复活）否则它将不会等待DOM准备就绪并

$（'.santa-l'）。延迟（12600）。动画（{'right'：'1800px'}，5000，重新激活）否则将出现堆栈错误。
$(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
}