jQuery repeat animations within functions

I have a simple flash animation that I am trying to rebuild with jQuery. I have 5 animations that are chained to start one after another. After all the animations fire, I need it to pause for 5 seconds, clear itself and begin the animation again. I need do do this indefinitely. Here is my code:

$(".bars").ready(function() {
    $(".barone").animate({
        'height': '49px'
    }, 2000, function() {
        $(".bartwo").animate({
            'height': '112px'
        }, 2000, function() {
            $(".barthree").animate({
                'height': '174px'
            }, 2000, function() {
                $(".barfour").animate({
                    'height': '236px'
                }, 2000, function() {
                    $(".barfive").animate({
                        'height': '298px'
                    }, 2000, function() {
                        $('.bars div').delay(5000, function() {
                            $('.bars div').css({
                                "height": "0"
                            });
                        });
                    });
                });
            });
        });
    });
});

Please forgive my source formatting, this text field is not agreeing with me.

You can also see the example at: http://execusite.com/fazio/files/careers-banner/test.html

Any help is greatly appreciated

Would this be correct then?

function animateThis(){ $(".bars div:nth-child(1)").animate({'height':'49px'}, 2000, function开发者_运维技巧() { $(".bars div:nth-child(2)").animate({'height':'112px'}, 2000, function() { $(".bars div:nth-child(3)").animate({'height':'174px'}, 2000, function() { $(".bars div:nth-child(4)").animate({'height':'236px'}, 2000, function() { $(".bars div:nth-child(5)").animate({'height':'298px'}, 2000, function() {

$('.bars div').delay(2000).css({"height" : "0"}), function() { animateThis()}; }); }); });

}); }); } $(".bars").ready(function(){animateThis()});

I apologize for my ignorance, I am somewhat new to jQuery and still trying to grasp the syntax.

place your code in a function. when the last animation happens, fire off the function again. Use a chained .delay(5000) to pause 5 seconds

sudo code:

function myAnimate(){
...your code.delay(5000).animate(....function(){ myAnimate() })
}

I would encapsulate your animation in a function and then use JavaScript's setInterval(func, interval).