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位置来为其设置动画。 它还利用链接，而不是每次创建一个新的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");

            });
        });

    } );
});