代码之家 › 专栏 › 技术社区 › Langdon

jQuery动画速度?

jquery-animate jquery

Langdon · 技术社区 · 16 年前

最终编辑 animate() ? 所提供的只是 duration ."

jQuery的 动画()

<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分钟在谷歌上找了一个,但找不出任何我喜欢的。

预计到达时间 Go here. (2) 把鼠标放在C上。毒蛇,看速度(3) 把鼠标放在Ryu上,但是在它完成之前,把鼠标移到DIV的中间(这样它就停止了)(4) 把鼠标放回左边,看看它移动得有多慢。

计算速度和距离的差异在这里似乎是无法克服的。我所要做的就是重新创建一个可爱的效果,我看到一个网站今天使用( this site ). 但它是Mootools,我在jQuery中=[

4 回复 | 直到 16 年前

Nick Craver 16 年前

对于更新的问题:
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');

这是新的 左边 属性,末端是 <ul> <div> 它在里面。然后我们从电流中减去(它是负数,所以相加) 左边

这种方法给你 速度 “每像素毫秒数” 而不是期间以前是这样的,这似乎就是你想要的。另一个优化是使用缓存的 <ul> 你已经有了一个选择器,使事情变得更快/更干净。

对于原始问题:

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

You can try a demo here

lukeshumard 14 年前

Supremation 指定动画的速度而不是持续时间。

Mike Sherov 16 年前

线性仅指定动画应以线性增量完成,而不是在完成时加速或减速。如果希望两个动画具有相同的速度,只需将动画所需的时间增加一倍,即距离的两倍:

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

Alexis Pigeon Shawn Skelton 13 年前

像这样的东西??

demo

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