コールバックのないjQueryアニメーション

Question

私は、"Towers of Hanoi"パズルのプログラム的な解答を示すプログラムを書こうとしています。ここでは、ディスクは絶対サイズの異なるdivで表されています。私はこのような機能を持って動くようにするには：

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

再帰的な、または何でも：

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

を次に、その溶液は次のようになります。いずれにしても、jQueryのアニメーションやコールバック関数ではなく、move（x、y）の観点から定義されたコードを「評価」できるようにしたいと考えています。問題は、すべてのアニメーションがすぐに呼び出される一方で、呼び出しの順番になる必要があることです。それを行う方法はありますか？

私はアニメーションに.delay（）を追加しようとしましたが、おそらく動作する可能性がありますが、正しいタイムアウトを把握できません。 setTimeout（）には目に見える効果はありません。グーグルは、アニメーションコールバックを使用するいくつかのアドバイスを明らかにしていますが、私のケースには当てはまりません。

Answer 1

だけでなくA non-nested animation sequence in jQuery?マッチあなたの問題（少し修正を加えた）への答え..

あなたのanimatiosを.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/