3

我正在尝试为数字设置动画，以便在页面加载时它会滚动到数字中。我正在使用另一个库来显示表盘（http://anthonyterrien.com/knob/）。我遇到的问题是每次运行时数字似乎都不同。它应该是一个以 19420 结尾的一致数字。但有时它会更低，并且似乎没有任何特定的模式。

我的 JS 代码如下所示：

$(function() {
    $('#dial').knob({
        min: '0',
        max: '25000',
        readOnly: true
    });

    $({
        value: 0
    }).animate({
        value: 19420 
    }, {
        duration: 950,
        easing: 'swing',
        step: function() {
            $('#dial').val(Math.round(this.value)).trigger('change');
        }
    });
});

小提琴可以在这里找到：http: //jsfiddle.net/ND5Sf/

我做错了什么或者我错过了什么？如果不是，这两个库不兼容吗？

4

1 回答 1

4

问题是因为您使用的是stepfunction 而不是progress.

步：

为每个动画元素的每个动画属性调用的函数。此函数提供了修改 Tween 对象以在设置之前更改属性值的机会。

进步：

在动画的每个步骤之后要调用的函数，每个动画元素仅调用一次，而与动画属性的数量无关。（添加的版本：1.8）

代码：

$(function () {
    $('#dial').knob({
        min: '0',
        max: '25000',
        readOnly: true
    });

    $({
        value: 0
    }).animate({
        value: 19420
    }, {
        duration: 950,
        easing: 'swing',
        progress: function () {
            $('#dial').val(Math.round(this.value)).trigger('change');
        }
    });
});

文档：http ://api.jquery.com/animate/

演示：http: //jsfiddle.net/IrvinDominin/JW2gP/

于 2013-08-16T11:40:55.640 回答