没有回调的 jQuery 动画顺序

Question

我正在尝试编写一个程序来说明 "Towers of Hanoi" 的编程解决方案拼图，其中磁盘由不同大小的绝对定位的 div 表示。为了进行移动，我有一个像这样的函数:

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/