jQuery repeat animations within functions

Question

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?

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

When you are editing a post, you can select a region and then click on the little "1010" button to "indent 4 spaces". — user166390
– user166390, Commented Dec 2, 2010 at 0:28
you can definetly improve the code, generalize the code and call it from a function — kobe
– kobe, Commented Dec 2, 2010 at 0:44

user406905 · Accepted Answer · 2010-12-02 07:04:13Z

2

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

edited Dec 2, 2010 at 7:04

answered Dec 2, 2010 at 0:34

user406905

1,41616 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JJ Nold Over a year ago

@user406905, please see above.

user406905 Over a year ago

yes that looks right. just need to throw in some semi-colons to be 100% correct.

James Kovacs · Accepted Answer · 2010-12-02 00:37:33Z

0

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

answered Dec 2, 2010 at 0:37

James Kovacs

11.7k42 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery repeat animations within functions

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related