スクロールは、jQueryアニメ裏

Question

私フットサル(室内サッカー）の指導に応用することができるコーチを追加する選手の画面に設定し、それを移動方向（図の矢印を使用HTML5キャンバス）を押して再生移動の全ての選手の画面になります。プレイヤーは、divと背景画像のプレイヤー。

アニメーションがされている使用 jquery .animate() 機能です。

の違いについての質問では変更にプレイヤー div's left や top cssに位置する属性

いつも迷うことを行うことができ

1. 作りたいjQueryライダーを移動でincrementlyとしてのアニメーションします。私は推測しないことにより算定総長のアニメーションの開始です。

2. を進めようと思い、jQueryスライダー上の逆、逆にanimataionや一時停止できます。そんなことが可能なのでしょうかべたいdivsアニメーションになフレームによるフレームシーケンスのアニメーション

Answer 1

アニメーションを開始する前に、どのように開始位置の保存について？

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which
$(playerdiv).data("startTop",startposition.top);
$(playerdiv).data("startLeft",startposition.left);

その後、使用してそれを取得することができます。

left = $(playerdiv).data("startTop")

など。

あなたはオールウェイズ、ステップオプションを使用してアニメーションにあなたがそれに応じて、スライダーを更新することができ、このようにコールバックを提供することができます。

$(playerdiv).animate({ 
    top : targetTop,
    left : targetLeft, 
    step, function(){ magic happens here
})

Answer 2

っていてこのようになっております:

1. ユーザがクリック"遊び"、"開始"を使用してアニメーション化のdivsからの現在位置がその先になります。簡単に計算時間およびdivs位置によってはスライダーの位置：

   • startingDivTop=initialDivTop+(finalDivTop-initialDivTop)*sliderPosition;
   • startingDivLeft=initialDivLeft+(finalDivLeft-initialDivLeft)*sliderPosition;
   • startingTime=totalDuration*sliderPosition;

   (ダイナミックレンジの広い、sliderPositionも0-1)

2. ユーザがクリックを繰り返してきましたのスライダー、呼び出します。stop()メソッドはすべてのdivs:そのように中止、行程を大幅に変更を使用してアニメーション化やことができるでしょうてから静的に:算定の位置にdivsは、実際に動かし静的です。

3. ユーザの場合、"しずく"のスライダー、"遊び"が活性化され、その後アニメに続く前からのスライダーでした。

そのような素敵なプロジェクトワン:)