如何使用jquery进行常量动画

时间:2010-02-25 02:40:35

标签: javascript jquery html

我想使用.animate功能但我有一些问题我想改变'左'值但我不知道我将移动的项目的宽度所以如果我发送到动画计时器1000和我的项目的宽度是100px,如果我的项目的宽度是500px将是不同的,并且当它接近它的目标结束时的动画它变得更快,无论如何移动我的项目而不用担心速度和超时?< / p>

3 个答案:

答案 0 :(得分:6)

如果我理解正确,你想要改变你动画项目的左边,但你希望它以恒定速度移动,而不是在恒定时间内完成< / em>的。事实上,以恒定速度移动项目是javascript(setInterval,setTimeout等)中动画的默认方式.JQuery是不希望进行(更频繁)案例中涉及的繁琐计算的人的捷径希望过渡在恒定时间内发生。

所以,有两种方法可以做到。一:不要将JQuery用于该动画。将setInterval或setTimeout与日期差异检查一起使用。二:使用JQuery但计算宽度,以便反向计算持续时间。您可以使用.width()获取任何JQuery对象的宽度。从这里你可以计算出需要行进的距离,然后将你想要保持不变的速度(每秒像素数)除以得到插入JQuery动画功能的时间。有意义吗?

答案 1 :(得分:2)

如果有人登陆这篇文章,JQuery函数animate()有一个名为linear的属性。 $()。animate({&#39;&#39;},速度,线性) 这将使animate()函数以恒定速度移动。

答案 2 :(得分:1)

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