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
}