jQuery animation order without callbacks
<p>I am trying to write a program to illustrate a programmatic solution of <a href="http://en.wikipedia.org/wiki/Towers_of_hanoi" rel="nofollow">"Towers of Hanoi"</a> puzzle, where the disks are represented by absolutely-positioned div-s of different size. To make a move I have a function like this:</p>

<pre><code>function move(peg_from, peg_to)
{
//check if the move is valid
//update the game state
//......
//get the div we are moving, calculate it's new position
//move:
the_div.animate({left: new_left, top: new_top}, 500);
}
</code></pre>

<p>Then a solution may look like this:</p>

<pre><code>move(1, 3);
move(1, 2);
move(3, 2);
//... etc...
</code></pre>

<p>Or recursive, or whatever. In any case, I want to be able to 'eval' any code, defined in terms of move(x, y), not in terms of jQuery's animation or callback functions. The problem is, all animation happens at once, while it needs to be in the calls order. Is there a way to do that?</p>

<p>I have tried adding .delay() to the animations, maybe it could work, but I can't figure out the correct timeouts, anyway. setTimeout() doesn't have any visible effect. Googling reveals some advices of using animation callbacks, but I don't think they are applicable to my case.</p>
