Razen Kellesly Razen Kellesly - 1 month ago 9
jQuery Question

Jquery animation loop multiple time

I have a loop issue with this code :

<p style="position:relative;left:100px;opacity:0" class="bc1">hello</p>


I want to loop the animation three loop with jquery to:


  1. $('.bc1').animate({left: '0px',opacity:'1'},1000);

  2. delay 10 second

  3. $('.bc1').animate({left: '100px',opacity:'0'},1000);

  4. delay 1 second

  5. then start again from 1



and can I make it infinite?

I tried:

var st=animateBac();
var af=animateRev();
st();
af();


but it's not looping.

Answer

Try this:

var animationIsOn = true;
var anim;
anim = function(){
    $('.bc1').animate({left: '0px',opacity:'1'},1000);
    setTimeout(function(){
        $('.bc1').animate({left: '100px',opacity:'0'},1000);
        setTimeout(function(){
            if(animationIsOn){
                anim();
            }
        },1000);
    },10000);
}

EDIT: Sorry, didn't add the delays.

Comments