Question

我不希望花费特定时间来完成动画，而是希望持续时间是起始值和结束值之差的函数。换句话说，远处某种东西的动画属性应该与接近的东西相同。

我已经设法通过手动改变持续时间来实现这一点，但这并没有为我想要实现的目标提供足够强大的解决方案。

HTML：

<div class="container" id="wrong">
    <div class="top"></div>
    <div class="middle"></div>
</div>

<div class="container" id="right">
    <div class="top"></div>
    <div class="middle"></div>
</div>

CSS：

.container { position: relative; float: left; width: 100px; height: 200px; }
.container > div { width: 50px; height: 50px; position: absolute; }
.top { background-color: red; }
.middle { background-color: blue; left: 50px; top: 50px; }

JS：

var fin      = { top: '100px' },
    duration = 2000;

var animate = function() {
    $('.top').css('top', 0);
    $('.middle').css('top', '50px');

    $('#wrong > div').animate(fin, duration, 'linear');

    $('#right .top').animate(fin, duration, 'linear');
    /* half the distance so use half the time */
    $('#right .middle').animate(fin, duration/2, 'linear');
};

animate()
setInterval(animate, 3000);

http://jsfiddle.net/SrQ77/

Answer 1

你必须计算它。

http://jsfiddle.net/SrQ77/1/

var fin      = 100,
    duration = 2000;

var animate = function() {

    $('.top').css('top', 0);
    $('.middle').css('top', '50px');
    $('#wrong .top').animate({top: fin+'px'}, ((fin - $('#wrong .top').position().top) / fin) * duration, 'linear');
    $('#wrong .middle').animate({top: fin+'px'}, ((fin - $('#wrong .middle').position().top) / fin) * duration, 'linear');

    $('#right .top').animate({top: fin+'px'}, duration, 'linear');
    /* half the distance! */
    $('#right .middle').animate({top: fin+'px'}, duration/2, 'linear');
};

animate()
setInterval(animate, 3000);

Answer 2

速度=距离/时间

你可以安排它以便

时间=距离/速度

并且您还希望动画以相同的速度运行。所以你可以忽略速度变量并继续

时间=距离

您可以使用https://api.jquery.com/offset/来帮助您找到距离

如何控制元素属性的动画速率，而不是持续时间？

2 个答案: