2

次の 2 つの方法を使用します。

function moveUp() {
     this.element.rotate(0);
     this.element.animate({"margin-top": "-=51px"}, "slow");
     //do some more things for instance.    
}

 function moveRight() {
     this.element.rotate(90);
     this.element.animate({"margin-left": "+=51px"}, "slow");
 }

念のため、オブジェクトを回転させてから、アニメーションで動かします。これらの機能はキーの押下にマッピングされているため、ユーザーが上または右を押すと、オブジェクトが移動します。私の問題は、jQuery が fx キューを使用するため、アニメーションが適切にキューに入れられることです。ただし、ローテーションは、コード内にあるカスタムのものであるため、私が行う他のことと同様に、すぐに発生します。

結果は明らかです。Say Up を押してすぐに右を押すと、オブジェクトは上に回転しますが、上に移動している間は右に回転し、そこに到達するまで実際には待機しません。

アニメーションだけでなく、メソッド全体がチェーンされるように、このコードをどのように書くことができますか。コールバックを追加することはできますが、常に一緒に実行されるとは限りません。同時に呼び出された場合はキューに入れる必要がありますが、jQuery でキュー機能を使用する方法がよくわかりません。

ところで、この背後にあるコードをもっと見るために、私は最近この質問もしました:プロトタイプ関数の配列

4

1 に答える 1

1

次のようなものを使用してアニメーション化できます。

    $elem.animate({rotation: 90},
    {
            duration: 'slow',
            step: function(now, fx) {
                    $(this).css({ "transform": "rotate("+now+"deg)", "-webkit-transform": "rotate("+now+"deg)", "-moz-transform": "rotate("+now+"deg)" });
            }
    })

それは自動的にキューに追加されます

ここでjsfiddleを作成しました：

http://jsfiddle.net/obartra/7Qwgd/1/

EDIT：私の理論的根拠を説明するために、rotateあなたが使用している方法は setTimeout を使用してCSSの回転を段階的に設定しているため、アニメーションキューに追加していないと推測しています。ここのコードはanimate、要素を回転させてアニメーション キューに追加するために使用します。

于 2013-04-04T15:58:58.780 に答える