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

Posted 2023-05-08

【中文标题】多个jquery动画以相同的速度和不同的高度同时完成动画

【英文标题】：Multiple jquery animate's with same speed and different height's complete the animation at the same time

【发布时间】：2012-02-04 05:42:35

【问题描述】：

所以，我有多个速度相同但高度不同的 jquery 动画，并且所有动画同时完成。

我想知道有没有办法不管距离多远都能保持原来的动画速度？

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

（我的问题不是它们如何同时完成，而是它们的速度如何变化）

---

FlabbyRabbit 的回答让我走上了正确的道路。这或多或少是我所追求的

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

【问题讨论】：

可能重复：***.com/questions/3191358/jquery-animation-speed

【参考方案1】：

下面是我的做法：

//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/

【讨论】：

我后来意识到我可能没有考虑过这个问题的所有方面，尤其是在这个例子中，但你的回答让我得到了我想去的地方。这或多或少是我所追求的。 jsfiddle.net/lollero/CEksN/12

这可能更有用：jsfiddle.net/CEksN/13。持续时间是指显示最小元素的时间长度，但应该很容易将其更改为最高元素。

谢谢！这可能会派上用场。

【参考方案2】：

这是一个修改版，我对高度和速度做了一个简单的改变，这样两者的比例就更明显了……

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

我还制作了线性动画，以便您可以看到它们以相同的速度制作动画。删除“线性”参数，它看起来就不那么均匀了。恐怕这只是宽松的本质。它看起来很可爱，但在同步你想要的东西时可能会导致数学问题。

希望这会有所帮助:)