jQuery动画速度？

Question

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

~~

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>

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

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

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

Answer 1

对于更新的问题:
首先,这是一个具有您想要的行为的工作演示.我们在这里做的是根据移动所需的量来调整速度,因为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');
});

你可以在这里试一下

Answer 2

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