Chaining JQuery animations through iteration

Question

I have a number of divs next to each other (horizontally) and want the width of each of them, sequentially. Ideally they should look like one long div that grows to the right from the left. My issue is that they all start growing simultaneously. Each div has the name 'div' with a number at the end, and I'm using 'i' as that number. This should be dynamic because I don't know what 'i' is going to be. Can I chain this through iteration? Thank you.

for (i = 0; i <= count; i++)
    {
        $('#div' + i).animate( {
            "width": "toggle"
        }, 1500 );
    }

Answer 1

Use the callback from the animate function to initiate the next operation

<script type="text/javascript">
  $.curDiv = 0;    
  continueAnimation = function()
  {
      $('div' + $.curDiv++).animate( { "width": "toggle" }, 1500, continueAnimation); 
  }
  continueAnimation();
</script>

Answer 2

I ended up making a separate function that would call an animation on the div then call itself. As it called itself it would increment a counter and I compare the counter to my total value and stop the loop when needed.