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

我做错了什么,或者我错过了什么?如果不是,这两个库是否不兼容?

最佳答案

问题是因为您使用的是step函数而不是progress

步:



进展:



码:

$(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/

09-25 17:20
查看更多