如何使用jquery制作恒定动画答案

【问题标题】：how to make constant animation using jquery如何使用jquery制作恒定动画
【发布时间】：2014-09-22 13:24:22
【问题描述】：

我想使用 .animate 函数但我有一些问题我想更改“左”值但我不知道我将移动的项目的宽度所以如果我发送到动画计时器到 1000 并且我的项目的宽度是 100 像素，如果我的项目的宽度是 500 像素，并且对于动画，当它接近它的目标结束时它会变得更快，无论如何移动我的项目而不用担心速度和超时？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

如果我的理解正确，您想更改您正在制作动画的项目的左侧，但您希望它以恒定速度移动，而不是在恒定时间内完成。事实上，以恒定速度移动项目是 javascript 中的默认动画方式（setInterval、setTimeout 等）。对于不想在（更频繁）案例中进行繁琐计算的人来说，JQuery 是一种快捷方式想要在恒定时间内发生过渡。

所以，有两种方法可以做到。一：不要为那个动画使用 JQuery。将 setInterval 或 setTimeout 与日期差异检查一起使用。二：使用 JQuery 但计算宽度，以便您可以反向计算持续时间。您可以使用.width() 获取任何 JQuery 对象的宽度。由此，您可以计算需要行进的距离，并将其除以您希望保持不变的速度（每秒像素数），以获得插入 JQuery 动画函数的时间。有意义吗？

【讨论】：

【解决方案2】：

如果有人看到这篇文章，JQuery 函数 animate() 有一个称为线性的属性。 $().animate({''}, 速度, 线性) 这将使 animate() 函数以恒定速度移动。

【讨论】：

animate()的第三个参数设置缓动，它既不改变动画的时长也不改变速度。

【解决方案3】：

这个插件完全符合您的要求：https://github.com/lukeshumard/supremation

【讨论】：