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