<p>I'm trying to set up a loop where an animation runs a certain number of times, and a function is run before each iteration of the animation.  The timing ends up being off, though -- it runs the callback n times, then runs the animation n times. For example:</p>

<pre><code>for (var i=0;i&lt;3;i++) {
  console.log(i);
  $('#blerg').animate({top:'+=50px'},75,'linear', function(){log('animated')});
}
</code></pre>

<p>outputs</p>

<pre><code>0
1
2
animated
animated
animated
</code></pre>

<p>I ran into this problem with scriptaculous before I switched to jquery, and discovered a "beforeSetup" animation callback.  Is there a jquery equivalent?</p>

The animation is asynchronous. So the loops runs through pretty quickly, starting off three animations and outputting 1, 2 and 3. After a while the animations complete and output animated x 3. That would explain your output.
How about some recursion?
```
```
do_animation(max_runs, total_runs) {
   log();
   if (total_runs < max_runs) {
       $(foo).animate(..., do_animation(max_runs, ++total_runs));
    }
}
```
```
do_animation(3, 0);
Give that a try and let me know how it runs.