Grow your CSS skills. Land your dream job.

Repeat or loop the jquery animation (help)

  • # June 11, 2013 at 4:32 am

    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 “”)

    # June 11, 2013 at 4:57 am

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

    # June 11, 2013 at 5:06 am

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

    # June 11, 2013 at 5:33 am

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

    # June 11, 2013 at 5:41 am

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

    # June 11, 2013 at 5:43 am

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".