CODEWITHSUNDEEP
javascriptjqueryloopsinfinite-loop
emoot
emoot

Reputation: 39

how to loop infinite animate js

im new to jQuery and have managed to animate a skating santa from one side to the other and back again but i cant find a way to loop it

ive looked all over trying examples on stack overflow but my inexperience is stopping me from adapting the code to mine 

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

Upvotes: 2

Views: 7209

Answers (2)

Ahmad
Ahmad

Reputation: 1931

You can try to wrap your code in a function that calls it self 

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

then

$(document).ready( reAnimate );

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Try this code :

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

Upvotes: 1

Related Questions