Question

我有简单的动画。

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

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

示例：

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

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

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

Answer 2

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

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

通过这种方式，每个动画的速度都相同，速度可以通过乘数来控制。

如何在jQuery中以相同的速度动画每个元素？

2 个答案: