jQuery.each() is pretty sweet but earlier today I wanted to run some animations across a set of three elements and since the animate() calls are non-blocking everything was happening at the same time. What I wanted to do was have the functions execute in a serial fashion (1 after the other).

I poked around and it doesn’t look like there’s a native way to do this. After a bit I decided to just whip something up and see how it works. Here’s what I had originally:

That ran fine but everything happened at the same time. The modified serial code looks like:

Basically, what it does is after the first element, the code will delay execution of the each() function until the hasCallbackCompleted flag is set for the correct element.

  • http://www.steveottenad.com Steve Ottenad

    You can also just put a $(this).delay(index*500).animate({Blah}); in there. Not the most appropriate way if you are handling lots of items, but for a small amount it works great.

  • http://www.setfive.com Ashish Datta

    oh good call. didn’t think of that at all. thanks for the tip.