jQuery和旋钮动画问题

Question

我正在尝试为数字设置动画，以便在页面加载时它会滚动到数字中。我正在使用另一个库来显示表盘 (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/

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

Answer 1

问题是因为您使用的是step 函数而不是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/