jQuery 动画速度？

jQuery Animation Speed?

提问by Langdon

Final Edit: The wall of text below can be summed up by simply asking "can I specify the speed of animations using jQuery's animate()? All that is provided is duration."

最终编辑：下面的文字墙可以通过简单地询问“我可以使用 jQuery 指定动画的速度animate()吗？提供的只是duration.”来概括。

~~

~~

jQuery's animate()seems to implement easing despite my use of "linear". How can I get the two boxes to stay together until the first finishes @ 250px? The second animates much faster because it has a longer distance to go.

animate()尽管我使用了“线性”，但jQuery似乎实现了缓动。我怎样才能让两个盒子保持在一起直到第一个完成@ 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>

Alternatively is there a jQuery carousel plugin that does this(mouse movement based on where you're mousing) so I don't have to rewrite it? I spent about 20 minutes looking for one on Google but couldn't come up with anything I liked.

或者，是否有一个 jQuery carousel 插件可以做到这一点（鼠标移动基于鼠标的位置）所以我不必重写它？我花了大约 20 分钟在谷歌上寻找一个，但找不到我喜欢的任何东西。

ETA: The example I provided is very simple, but the issue as I found it is applied to a more complex code base. (1) Go here.(2) Put mouse on C. Viper, see the speed. (3) Put mouse on Ryu, but before it finishes, move your mouse to the middle of the DIV (so it stops). (4) Put your mouse back on the left side and see how utterly slow it moves.

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

Calculating the differences in speed and distance seems insurmountable here. All I'm trying to do is recreate a lovely effect I saw a site use today (this site). But it's Mootools, and I'm in jQuery. =[

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

回答by Nick Craver

For the updated question:
First, here's a working demo with the behavior you want. What we're doing here is adjusting the speed based on the amount needed to move, because speedisn't an accurate description, it's the duration, moving a shorter distance over the same duration means a slower move, so we need to scale the duration with the distance we need to move. For moving backwards, it looks like this:

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

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

Since the <ul>scrolls with a negative left position, we need to move the inverse of that many pixels to get back to the beginning, so we're using -oldLeft(it's currentleftposition).

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

For the forward direction, a very similar approach:

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

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

This gets the new leftproperty, the end being the width of the <ul>minus the width of the <div>it's in. Then we subtract (it's negative so add) that from the current leftposition (also negative, so reverse it).

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

This approach gives your speedvariable a whole new meaning, it now means "milliseconds per pixel"rather than the durationit did before, which seems to be what you're after. The other optimization is using that cached <ul>selector you already had, making things a bit faster/cleaner overall.

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

---

---

For the original question:
Keep it simple, just half the time for half the distance, like this:

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

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

You can try a demo here

您可以在此处尝试演示

回答by lukeshumard

I made a plugin that does exactly what you want. You can use Supremationto specify the speed of the animation as opposed to the duration.

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

回答by Mike Sherov

linear only specifies that the animation should be done in linear increments and not speed up or slow down as it finishes. If you want the two animations to be the same speed, just double the time it takes for the animation that is twice the distance:

线性仅指定动画应以线性增量完成，并且在完成时不加速或减速。如果您希望两个动画的速度相同，只需将距离两倍的动画所需的时间加倍即可：

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

回答by Reigel

something like this??

像这样的东西？？

demo

演示

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