jQuery动画的左侧和底部作品，但不是顶部和右侧

问题描述：

为什么jQuery animate将框带到右侧，然后到底部，并停在那一点？我想通过一个完整的圆（或正方形）获得一个盒子，以便盒子能够返回到原来的位置。jQuery动画的左侧和底部作品，但不是顶部和右侧

'left'和'top'的位置，而不是命令移动方向。所以你改变左边的位置，让物体向左或向右移动，并改变顶部位置，使物体上下移动。你可以使用bottom和right来代替left和top，但是如果你左右混合或者上下混合，你会得到一团糟。在每个方向挑选一个并且只有一个。 – jfriend00 2012-01-07 05:55:31

答

的元件可以有一个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对象。

http://jsfiddle.net/Paulpro/QZWDs/49/ – Paulpro 2012-01-07 05:53:35

伟大的反馈 - 清楚发生了什么事情。感谢您展示我的链接！ – Tony 2012-01-07 05:54:59

我只想补充一点，它对于一个元素具有顶部，底部，左侧和右侧是完全有意义的。这就是你如何在屏幕中间定位div或使div始终填满整个屏幕的方式。实际上，我个人希望有一个解决方案来为所有4个动画制作动画，这样您就可以缩小或增大这种定位的div。 – dallin 2016-09-18 05:09:51

答

尝试这个

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

      }); 
     }); 

    }); 
});

一个不需要使用这样的完成功能。同一对象上的多个动画会自动排队，并会默认顺序运行。这不是必需的。 – jfriend00 2012-01-07 05:53:15

这里有使用回调的任何缺点，它的功能相同。我的意思是说，我的答案没有错，但它是什么使得更少的优化。请解释一下，因为我是jQuery的新手，我已经学会了自己的基本知识。 – Murtaza 2012-01-07 05:59:02

你的方法的一些缺点：1）你正在为每个动画调用创建一个新的jQuery对象，而不是像在user1的答案中那样链接一个对象。 2）嵌套多个完成函数只是比编写和理解更复杂的代码，而不是让动画队列为您工作 - 简单的代码也可以更好地工作。 3）在使用链接时，'.stop（）'方法可以控制如何处理其他排队动画，并且没有完成函数嵌套的控制级别。 – jfriend00 2012-01-07 06:05:59

jQuery动画的左侧和底部作品，但不是顶部和右侧

相关推荐