同样速度和不同高度的多个jquery动画的同时完成动画

问题描述：

所以，我有多个jquery动画的速度和高度不同，并且所有的动画都是同时完成的。同样速度和不同高度的多个jquery动画的同时完成动画

我想知道是否有办法保持原来的动画速度不管距离是多少？

http://jsfiddle.net/lollero/CEksN/ - 这意味着这些当然会在不同的时间完成。

（我的问题是不是真的，他们一切是如何完成在同一时间，但他们的速度如何变化）

FlabbyRabbit的回答让我在正确的道路。这是多了还是少了什么我

http://jsfiddle.net/lollero/CEksN/12/

可能重复：http://*.com/questions/ 3191358/jquery-animation- – hleinone 2012-01-06 13:52:57

答

这是我会怎么做呢：

//Calculate length of time per pixel 
var spp = 500/20; 
$('#lt').animate({ height: '400' }, spp*400, 'linear'); 
$('#mm').animate({ height: '55' }, spp*51, 'linear'); 
$('#ss').animate({ height: '20' }, spp*20, 'linear');

你更新的jsfiddle：http://jsfiddle.net/CEksN/8/

我后来意识到，我可能没有想过这个问题的所有方面，特别是对于这个例子，但是你的答案让我想到了它的位置。这或多或少是我所追求的。 http://www.jsfiddle.net/lollero/CEksN/12 – Joonas 2012-01-06 14:27:42

这可能会更有用：http://jsfiddle.net/CEksN/13/。持续时间是指显示最小元素的时间长度，但应该很容易将其更改为最高。 – FlabbyRabbit 2012-01-06 14:29:45

谢谢！这可能会派上用场。 – Joonas 2012-01-06 14:35:40

答

后，这里有一个修改版本，其中我做了一个简单的变化的高度和速度，使两者之间的比例更明显...

$('#lt').animate({ height: '400' }, 1600, "linear"); 
$('#mm').animate({ height: '200' }, 800, "linear"); 
$('#ss').animate({ height: '100' }, 400, "linear");

我也制作了线性动画，以便您可以看到它们以相同的速度进行动画制作。删除“线性”参数，它甚至看起来都不那么明显。恐怕这只是宽松的本质。它看起来很可爱，但当涉及到像你想要的那样同步时，它可能会导致一个数学问题。

希望这有助于:)

同样速度和不同高度的多个jquery动画的同时完成动画

相关推荐