jQuery动画速度? [英] jQuery Animation Speed?

问题描述

最终编辑:可以通过简单地询问我可以使用jQuery的animate()指定动画的速度吗?可以提供的全部是duration"来总结下面的文字.

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."

~~

尽管我使用了"linear"，但jQuery的animate()似乎实现了缓动.我如何才能使两个盒子保持在一起，直到第一个完成@ 250px?第二个动画要快得多，因为它要走的距离更长.

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.

<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>

或者是否有一个jQuery旋转木马插件可以做到这一点(鼠标移动基于您正在鼠标移动)，所以我不必重写它?我花了大约20分钟的时间在Google上找了一个，但找不到我喜欢的东西.

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.

ETA :我提供的示例非常简单，但是我发现的问题适用于更复杂的代码库. (1)转到此处.(2)将鼠标放在C. Viper上，观察速度. (3)将鼠标放在Ryu上，但是在完成之前，将鼠标移到DIV的中间(这样它就停止了). (4)将鼠标放回左侧，查看其移动速度有多慢.

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.

在这里计算速度和距离的差异似乎是不可逾越的.我要做的就是重现我今天看到的网站使用效果(

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. =[

推荐答案

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

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 speed isn'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:

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

由于<ul>滚动到负的左位置，因此我们需要移动那么多像素的倒数以回到起点，因此我们使用-oldLeft(它是 current left位置).

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 current left position).

对于前进方向，一种非常相似的方法:

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');

这将获得新的left属性，结尾是<ul>的宽度减去它所在的<div>的宽度.然后我们从当前left位置减去(为负，因此加) (也是负面的，因此将其反转).

This gets the new left property, 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 left position (also negative, so reverse it).

这种方法为您的speed变量赋予了全新的含义，它现在表示的是每像素毫秒" ，而不是以前的 duration 你在追求什么.另一个优化方法是使用您已经拥有的缓存<ul>选择器，使整体处理速度更快/更干净.

This approach gives your speed variable a whole new meaning, it now means "milliseconds per pixel" rather than the duration it 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.

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

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');
});

您可以在此处尝试演示

这篇关于jQuery动画速度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！