没有回调的jQuery动画顺序

Question

我正在尝试编写一个程序来说明"Towers of Hanoi" 难题的编程解决方案，其中磁盘由不同大小的绝对定位的 div-s 表示。为了采取行动，我有这样的功能：

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);
}

那么解决方案可能如下所示：

move(1, 3);
move(1, 2);
move(3, 2);
//... etc...

或递归，或其他。无论如何，我希望能够“评估”任何代码，这些代码是根据 move(x, y) 定义的，而不是根据 jQuery 的动画或回调函数定义的。问题是，所有动画同时发生，而它需要按调用顺序进行。有没有办法做到这一点？

我尝试将 .delay() 添加到动画中，也许它可以工作，但无论如何我无法确定正确的超时时间。 setTimeout() 没有任何可见的效果。谷歌搜索揭示了一些使用动画回调的建议，但我认为它们不适用于我的情况。

Answer 1

A non-nested animation sequence in jQuery? 的答案也符合您的问题（稍作修改）..

你需要.queue()你的动画..

var q = $({});

function moveToQueue(eg_from, peg_to) {
    q.queue(function(next) {
        //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, next);
    });
}


// usage
moveToQueue(1, 3);
moveToQueue(1, 2);
moveToQueue(3, 2);

---

更新

因为我喜欢它..
这是一个完整的工作解决方案.. http://jsfiddle.net/gaby/nZ4MU/