5

假设我有一些 div，我用.animate({opacity:0},400, function(){});它的孩子。那么是否有可能获得动画完成的剩余时间？例如，剩余 200 毫秒，如果没有动画，则为 0？谢谢。

4

3 回答 3

6

为了帮助您更好地理解如何使用该step功能 [由gdoron发布] ，我使用step
功能创建了一个示例 来获取剩余时间：

（单击get state!按钮停止动画并检索剩余时间！）

带距离
的演示 带不透明度的演示

距离示例 jQuery：

var time = 4000;
var distance = 300;
var currentTime = 0;

$('#ball').animate({
    left: distance
}, {
    duration: time,
    step: function (now, fx) {

        currentTime = Math.round((now * time) / distance);
        var data = fx.prop + ' ' + Math.round(now) + '; <b>' + currentTime + 'ms</b> ';

        $('body').append('<p>' + data + '</p>');
    },
    easing: 'linear'
});

$('#getTime').click(function () {
    $('#ball').stop();
    $('body').prepend('<p>currentTime is:' + currentTime + ' ms; REMAINING: ' + (time - currentTime) + 'ms</p>');
});
  • 您可以看到我如何使用fx.prop内部animation step来获取left当前动画的 ( ) 属性。
  • 您可以看到如何：知道动画时间和距离（不透明度，无论如何......），我们可以通过一些简单的数学（(now*time)/distance）轻松检索“停止/暂停”状态，这要归功于返回now值。
于 2012-05-13T02:06:45.083 回答
3

我不知道你为什么需要它，但step可以帮助你提取这个值：

阶跃函数

.animate() 的第二个版本提供了一个 step 选项——一个在动画的每一步触发的回调函数。此函数对于启用自定义动画类型或更改正在发生的动画很有用。它接受两个参数（now 和 fx），并将其设置为动画的 DOM 元素。

now：每一步动画属性的数值
fx：对 jQuery.fx 原型对象的引用，其中包含许多属性，例如动画元素的 elem，第一个和最后一个值的 start 和 end分别为动画属性和被动画属性的道具。

文档

于 2012-05-13T00:43:32.477 回答
3

听着，别介意step每个人都在谈论的功能。我曾经需要你做的事情并写了我自己的，简单地说就是通过查看总动画时间（你应该已经知道，因为你曾经把这个数字给 jQuery）和当前的商和目标不透明度。然后将该商乘以总动画时间，从总时间中减去总和。就那么简单。

伪代码：

func calculate-time-left-in-a-running-fade-in-animation:
{
    var current_opacity = $elem.css('opacity');
    var target_opacity = this.getTargetOpacity();

    var total = this.getTotalAnimationTime();

    var quotient = current_opacity / target_opacity;
    return total - quotient * total;
}
于 2012-10-09T06:40:08.773 回答