jquery animation repeat, what is wrong with my syntax?

Can someone please evaluate my code and let me know if it is correct.

I am trying to run one animation after another, pause for 5000 milliseconds, reset all heights back to zero and repeat the animation again indefinitely.

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'}, 200开发者_如何学C0, 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()});

The example can be seen at http://execusite.com/fazio/files/careers-banner/test.html

I have reformatted it from some answers I have received yesterday but it still doesn't work and I haven't received any feedback.

Thanks!

You can do it like this:

Example: http://jsfiddle.net/patrick_dw/T5acF/4/

function animateThis() {
    var length = $('.bars div').stop().each(function(i, val) {
        $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() {
            if (i === (length - 1)) {
                $('.bars div').animate({ height: 0 }, 2000, animateThis);
            }
        });
    }).length;
}

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

EDIT: Didn't notice the animation back to 0. Fixed with this updated version.

EDIT: Adding .stop() before the new .each() seemed to clean up the issue I was having.

EDIT: Made it a little more efficient by replacing $(this).index() with i (which represents the same index).

I'm obviously not paying close enough attention. You didn't want to animate the height back to 0, but rather wanted to delay 5000 milliseconds, then immediately reset.

Example: http://jsfiddle.net/patrick_dw/T5acF/5/

function animateThis() {
    var length = $('.bars div').each(function(i, val) {
        $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() {
            if (i === (length - 1)) {
                setTimeout(function() {
                     $('.bars div').height(0);
                     animateThis();
                }, 5000);
            }
        });
    }).length;
}

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

Try this:

function animateThis() {
    var divs = $(".bars div").get();
    var time = 2000;
    $(divs[0]).animate({'height': '49px'}, time, function() {
        $(divs[1]).animate({'height': '112px'}, time, function() {
            $(divs[2]).animate({'height': '174px'}, time, function() {
                $(divs[3]).animate({'height': '236px'}, time, function() {
                    $(divs[4]).animate({'height': '298px'}, time, function() {
                        setTimeout(function() {
                            $(divs).css('height', '0px');
                            animateThis();
                        }, time);
                    });
                });
            });
        });
    });
}

Note: This code is redundant. I wrote this just to show how to make the code more efficient (by getting rid of unnecessary selector queries). I would go with patrick's answer if I were you.

var animateThis = function(){
            $(".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).animate({"height" : "0"}, 0), function() { animateThis()};
                            });
                        });
                    });                                                          
                });
            });
        };
    $(".bars").ready(function(){animateThis()});

delay(2000).css({"height" : "0"})

Here, you haven't specified a callback for what to do after the delay; the .css call runs immediately because .delay returns immediately (and would set up the callback, if one were provided, to run later).

.css() makes an immediate change, not an animated one. There is still a delay before the change, but you might easily get confused about that, since the previous transition does animate. It seems like you intend for the div to snap back into place, but you need to account for the time taken by the previous transition. As is, you're only just waiting for the previous transition to finish before snapping into place.

, function() { animateThis() };

Here, you define an un-named callback function that calls animateThis(), but you don't actually call it - you haven't provided it to a function (such as delay css animate) that takes a callback. Even though we don't actually want to animate the last transition, using animate instead of css lets us hook in a callback.

Stephen provided the fix in his answer. Try this:

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