jQueryアニメーションの左下のアニメーションは、右上と右下にありません。

Question

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

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

Answer 1

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

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

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

Answer 2

この

$("#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"); 

      }); 
     }); 

    }); 
});