如何在jQuery中以相同的速度对每个元素进行动画处理

How to animate every element in equal speed in jQuery?

本文关键字：元素 处理 动画 速度 jQuery      更新时间：2023-09-26

我有简单的动画。

$(element).animate({
    left: rand_value() + "px"
}, 5000, "linear");

但有一个小问题。动画持续时间从 A 点到 B 点为 5 秒。但我想以相同的速度从 A 点到 B 点对每个元素进行动画处理，而不受时间的依赖性。我不知道该怎么做。

例：

  • ElemA：起点为 0，终点为 1000
  • ElemB：srart 点为 0，终点为 200

ElemA 和 ElemB 的速度必须相等，~ 10px/秒。这意味着动画的持续时间不同。

这可能会有所帮助：

var rand = rand_value();
$(element).animate({
    left: rand + "px"
}, 100*rand, "linear");

这就是为什么这是有道理的：speed = distance/time，如此10px/sec = rand/time，因此0.01px/millisecond = rand/time，以至于time = rand/0.01等于time = rand * 100。这与.animate(...)以毫秒为单位的持续时间这一事实一致。

好的，谢谢你的想法JCOC611对我来说有合适的解决方案

var rand = rand_value();
var multiplier = 3; // multiplier, to decrease animation speed
$(element).animate({
    left:  rand +"px)"
}, rand * multiplier, "linear");

这样，每个动画都将具有相同的速度，并且可以通过乘数控制速度。

相关文章：