jQuery动画速度？

最终编辑 ：下面的文本墙可以通过简单地问“我可以使用jQuery的animate()来指定动画的速度来总结吗？所有提供的都是duration 。”

尽管我使用了“线性”，但jQuery的animate()似乎实现了缓动。我怎样才能让两个盒子保持在一起，直到第一次完成@ 250px？第二个动画更快，因为它有更长的距离。

   $(function() { $('#a').animate({left: '250px'}, 1000, 'linear'); $('#b').animate({left: '500px'}, 1000, 'linear'); });

或者有一个jQuery carousel插件可以做到这一点（基于你在哪里鼠标移动鼠标移动）所以我不必重写它？我花了大约20分钟在Google上寻找一个，但无法想出任何我喜欢的东西。

ETA ：我提供的示例非常简单，但我发现它的问题适用于更复杂的代码库。（1）去这里。（2）将鼠标放在C. Viper上，查看速度。（3）将鼠标放在Ryu上，但在完成之前，将鼠标移动到DIV的中间位置（使其停止）。（4）将鼠标放回左侧，看它的移动速度有多慢。

计算速度和距离的差异似乎是不可克服的。我所要做的就是重现我今天看到网站使用的一个可爱效果（本网站）。但它是Mootools，而我是jQuery。 = [

对于更新的问题：
首先，这是一个有你想要的行为的工作演示。我们在这里做的是根据移动所需的量来调整速度，因为speed不是准确的描述，而是持续时间 ，在相同的持续时间内移动较短的距离意味着移动较慢，因此我们需要缩放持续时间与我们需要移动的距离。为了向后移动，它看起来像这样：

 var oldLeft = ul.offset().left; ul.animate({left: 0}, -oldLeft * speed, 'linear');

由于

滚动左侧负位置，我们需要移动那么多像素的倒数才能返回到开头，所以我们使用-oldLeft （它是当前的 left位置）。

对于前进方向，一种非常类似的方法：

 var newLeft = divWidth - ulWidth, oldLeft = ul.offset().left; ul.animate({left: newLeft + 'px'}, (-newLeft + oldLeft) * speed, 'linear');

这将获得新的left属性，结尾是

的宽度减去它所在的

的宽度。然后我们从当前left位置减去（它是负的，因此添加）（也是负的，所以反转它）。

这种方法为你的speed变量赋予了全新的含义，它现在意味着“每像素毫秒”而不是之前的持续时间 ，这似乎就是你所追求的。另一个优化是使用你已经拥有的缓存

选择器，使整体更快/更清洁。

对于原始问题：
保持简单，只有一半的时间，一半的距离，像这样：

 $(function() { $('#a').animate({left: '250px'}, 500, 'linear'); $('#b').animate({left: '500px'}, 1000, 'linear'); });

你可以在这里试一下

我制作了一个完全符合你想要的插件。您可以使用Supremation指定动画的速度而不是持续时间。

linear仅指定动画应以线性增量完成，而不是在完成时加速或减速。如果你想让两个动画的速度相同，那么只需要两倍于距离的动画所需的时间加倍：

 $('#a').animate({left: '250px'}, 1000, 'linear'); $('#b').animate({left: '500px'}, 2000, 'linear');

这样的事情？

演示

 $('#a,#b').animate({left: '250px'}, 1000, 'linear', function(){ $('#b').animate({left: '500px'}, 1000, 'linear'); } );