jquery - 是否可以定义 jQuery 动画的速度而不是持续时间？

Question

我的立场取决于动态值(value)。这是有道理的，较短的距离应该动画更快，但具有相同量的加速度(速度)。然而，在 jquery 文档中，我只看到一种定义持续时间的方法，这对于很多事情来说都可以，但对于其他事情来说则不然。我如何定义速度，以便如果值很小，持续时间也很小，如果值很长，那么持续时间也很长。谢谢。

Answer 1

由于 jQuery 动画只接受时间，因此您可以计算时间来给出具体的速度:

time = pixels / desired pixels per second

因此，如果动画覆盖 200px，所需速度为 100px/秒，那么您只需计算:

time = 200px / 100 px per sec = 2 sec = 2000ms

如果动画覆盖 40 像素，那么您将:

time = 40px / 100 px per sec = 0.4 sec = 400ms

您还可以制作自己的 jQuery animate 版本，使用这种形式的 animate(properties, options):

jQuery.fn.speedAnimate = function(properties, options, val, rate) {
    options.duration = (val / rate) * 1000;
    return this.animate(properties, options);
}

其中 val 可以采用您想要使用的任何单位(像素可能是最常见的)，rate 可以采用单位/秒。