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的机会 object在设置之前更改属性的值。

进度：

在动画的每个步骤之后调用的函数，仅一次无论动画属性的数量如何，每个动画元素。（版本添加：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/

jQuery和Knob动画问题

1 个答案: