Repeat or loop the jquery animation (help)

[ajnoguerra]

Hi, still learning to create simple animation with jquery. This one I’m doing right now is a div that slides to the left of its parent div. But it is only animating ones. What I want to do is to keep it repeating. I tried to research for answers and found that I should put my code inside a function and then call its function name but its not working. Please see this [codepen](http://codepen.io/ajnoguerra/pen/DcCsn “”)

[CrocoDillon]

You need to reset the width before animating again:

$(document).ready(function(){
reslide();
});
function reslide(){
$(‘.slide-right’).css({width:’0′}).animate({width:’100%’}, 400, reslide);
}

[ajnoguerra]

@CrocoDillon thanks! Now its working. But I have encountered another problem. How do I make the child div pause for 2sec after showing? I’m using this line but the whole animation stops.

setTimeout(transition, 2000);

[CrocoDillon]

Seems like you already figured it out with delay :) This might help if you want to delay resetting width to 0 as well:

function reslide(){
$(‘.slide-right’).delay(1000).queue(function(){
$(this).css({width:’0′}).dequeue();
}).animate({width:’100%’}, 400, reslide);
}

[ajnoguerra]

Finally got what I want to do with a little tweak and help from you @CrocoDillon. Thanks a lot! :)

$(document).ready(function(){
reslide();
});

function reslide(){
$(‘.slide-right’).delay(5000).animate({width:’0′}, 600).delay(5000).animate({width:’100%’}, 600, function(){
setTimeout(reslide, 2000);
});
}

[CrocoDillon]

Ah cool, not sure if you wanted to animate the reset as well :P Yw! You can remove the setTimeout I think.

[Author]

Posts