jQuery动画左边和底部工作，但不是顶部和右边

Question

为什么jQuery动画会将一个框带到右边，然后到底部，然后停在那个位置？ 我试图通过一个完整的圆圈（或准确的方形）来获得一个盒子，这样盒子就会回到原来的位置。

这是jsfiddle：http://jsfiddle.net/QZWDs/

Answer 1

元素可以是top或bottom位置，可以是left或right。拥有这四个都没有意义。用它来做你想要的动画：

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

这仅使用top和left位置来设置动画。它还利用链接，而不是每次调用$(".block")创建一个新的jQuery对象。

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");

            });
        });

    } );
});