jQuery 动画速度？

Question

最终编辑：下面的文字墙可以简单地总结为“我可以使用jQuery的animate()指定动画的速度吗？提供的只是duration。”

~~

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function()
    {
        $('#a').animate({left: '250px'}, 1000, 'linear');
        $('#b').animate({left: '500px'}, 1000, 'linear');
    });
</script>

<div id="a" style="background-color: red; position: relative; width: 50px; height: 50px;"></div>
<br/><br/>
<div id="b" style="background-color: red; position: relative;width: 50px; height: 50px;"></div>

或者is there a jQuery carousel plugin that does this（鼠标移动取决于你的鼠标位置）所以我不必重写它？我花了大约 20 分钟在 Google 上寻找一个，但找不到任何我喜欢的东西。

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

在这里计算速度和距离的差异似乎是不可逾越的。我要做的就是重新创建我今天看到的网站使用的可爱效果 (this site)。但它是 Mootools，我在 jQuery 中。 =[

Answer 1

更新后的问题：
First, here's a working demo with the behavior you want。我们在这里所做的是根据移动所需的量来调整速度，因为speed 不是一个准确的描述，它是持续时间，在相同的持续时间内移动更短的距离意味着较慢的移动，因此我们需要根据需要移动的距离来缩放持续时间。对于向后移动，它看起来像这样：

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

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

对于正向，一个非常相似的方法：

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

这将获得新的left 属性，末尾是<ul> 的宽度减去它所在的<div> 的宽度。然后我们从当前的left 位置减去（它是负数所以添加） （也是负数，所以反过来）。

这种方法为您的speed 变量赋予了全新的含义，它现在的意思是“每像素毫秒数”，而不是之前的持续时间，这似乎是你在追求什么。另一个优化是使用您已经拥有的缓存 <ul> 选择器，使事情变得更快/更干净。

---

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

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

You can try a demo here

Answer 2

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

Answer 3

linear 仅指定动画应该以线性增量完成，并且在完成时不会加速或减速。如果你想让两个动画的速度相同，只需将两倍距离的动画所花费的时间加倍即可：

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

Answer 4

这样的？？

demo

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