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

如何循环无限动画js

2 个答案: