jQuery动画速度？

最终编辑：以下文字的墙壁可以简单地询问：“我可以使用jQuery的动画()指定动画的速度吗？所提供的是持续时间.

尽管我使用“线性”,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'},'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. = [

解决方法

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

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

由于< ul>滚动一个负的左位置,我们需要移动这个许多像素的倒数,以回到起始点,所以我们使用-oldLeft(它是当前的左侧位置).

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

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

这会得到新的left属性,结尾是< ul>的宽度.减去< div>的宽度它在.然后我们减去(它是负的,所以添加)从当前的左位置(也是负的,所以反转它).

这种方法为您的速度变量提供了一个全新的意义,现在意味着“每像素毫秒”,而不是之前的持续时间,这似乎是你之后的.另一个优化是使用缓存的< ul>选择器已经有了,使事情变得更快/整洁.

对于原来的问题：
保持简单,只有一半的距离,如下所示：

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

You can try a demo here

jQuery动画速度？

解决方法

猜你在找的jQuery相关文章