javascript - 如何在 jQuery 中以相同的速度为每个元素设置动画？

Question

我有简单的动画。

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

但是有一个小问题。从 A 点到 B 点的动画持续时间为 5 秒。但是我想以相同的速度从 A 点到 B 点为每个元素设置动画，而不依赖于时间。而且我不知道该怎么做。

例子:

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

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

Answer 1

这可能有帮助:

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(...) 以毫秒为单位持续时间这一事实是一致的。