ページ上の要素のアニメーションをステップ実行する再帰関数があります。
_this = this;
this.x = 0, this.y = 0;
this.targX = 5, this.targY = 5;
this.go = function(){
var xDir = 0, yDir = 0, finished = false;
if(this.x>this.targX){
console.log("Reverse x");
xDir = -1;
}else if(this.x<this.targX){
console.log("Forward x");
xDir = 1;
}else{
xDir = 0;
if(this.y>this.targY){
console.log("Reverse y");
yDir = -1;
}else if(this.y<this.targY){
console.log("Forward y");
yDir = 1;
}else{ finished = true; }
}
this.x+= xDir;
this.y+= yDir;
if(finished==false){
this.$c.animate({
left: "+="+32*xDir,
top: "+="+32*yDir
}, 200, _this.go());
}
}
うまくいけば、これはコードから明らかですが、アニメーションは最初に = まで x 方向に進み、次にthis.x
=this.targX
まで y 方向に進みます。この場合、要素は 5 ステップ右に移動し、次に 5 ステップ下に移動します。this.y
this.targY
ただし、実際には、アニメーションは 5 ステップ下がってから 5 ステップ右に移動します。まるでアニメーション キューが逆になっているようです。成功の呼び出しを削除する_this.go()
と、要素は 1 ステップ右に移動して停止します。そのため、軸がどこかで混乱していないことがわかります。コンソール ログでも、正しい順序で報告されます。
Forward x
Forward x
Forward x
Forward x
Forward x
Forward y
Forward y
Forward y
Forward y
Forward y
ここで何が起こっているのですか? なぜアニメーション キューが逆に実行されているのですか? 私は何か間違ったことをしていますか、それともこれは JQuery の予想される動作ですか?
編集:ここでフィドル: http://jsfiddle.net/WdYvB/