2012-01-07 38 views
2

なぜjQueryのアニメーションは、ボックスを右に、次に下に移動し、そのポイントで停止しますか? 私はボックスを元の位置に戻すために、完全な円(または正確な正方形)を通してボックスを取得しようとしています。jQueryアニメーションの左下のアニメーションは、右上と右下にありません。

ここjsfiddleです:http://jsfiddle.net/QZWDs/

+1

を試し 'left'と' top'が位置している、方向を移動させるための命令ではありません。したがって、オブジェクトを左または右に移動するために左の位置を変更し、オブジェクトを上または下に移動するために上の位置を変更します。左と上の代わりに下と右を使うことができますが、左右と上下を混在させると混乱するでしょう。各方向に1つだけを選んでください。 – jfriend00

答えて

13

要素がtopまたはbottom位置のいずれかを持っているとleftまたはrightいずれかをすることができます。 4つすべてを持つことは理にかなっていません。これは、それをアニメーション化するだけtopleft位置を使用しています

$(".block").animate({left:"150px"}, "slow") 
      .animate({top:"150px"}, "slow") 
      .animate({left:0},"slow") 
      .animate({top:0}, "slow"); 

:あなたがしたいアニメーションを行うために使用します。また、新しいjQueryオブジェクトを作成するたびに$(".block")を呼び出すのではなく、連鎖を利用します。

+0

http://jsfiddle.net/Paulpro/QZWDs/49/ – Paulpro

+0

偉大なフィードバック - 何が起こっていたのかの明確な説明。私にチェーンを見せてくれてありがとう! – Tony

+0

要素の上、下、左、右を完全に理解することを追加したいと思います。これは、画面の中央にdivを配置するかdivを常に画面全体に塗りつぶすようにする方法です。私は実際にすべての4をアニメーション化するソリューションを個人的に望んでいたので、このように配置されたdivを縮小または拡大することができました。 – dallin

1

この

$("#right").ready(function(){ 

    $(".block").animate({left:"150px"},"slow", function() { 
     $(".block").animate({bottom:"150px"},"slow", function() { 
      $(".block").animate({left:"50px"},"slow", function() { 
      $(".block").animate({top:"0px"},"slow"); 

      }); 
     }); 

    }); 
}); 
+3

このような完了関数を使う必要はありません。同じオブジェクト上の複数のアニメーションは自動的にキューに入れられ、デフォルトで順次実行されます。これは必要ではありません。 – jfriend00

+0

ここにコールバックを使用することには欠点があります。私は私の答えで間違っていないが、それはあまり最適化されていないと言うことを意味します。私はjQueryを初めて使ったので少し説明してください。自分で基本的に学んだことがあります。 – Murtaza

+2

あなたのメソッドにはいくつかの欠点があります:1)user1の答えのように1つのオブジェクトを連鎖させるのではなく、アニメーション呼び出しごとに新しいjQueryオブジェクトを作成しています。 2)複数の補完関数をネストすることは、アニメーションキューがあなたのために働くようにすることよりも、書くだけで複雑なコードにすぎません。 3)連鎖を使用するとき、 '.stop()'メソッドは他のキューに入れられたアニメーションと何をするかを制御し、補完関数の入れ子でそのレベルの制御を持たない。 – jfriend00

関連する問題