用JQuery内置animate方法实现数字递增动画

时间:2023-03-09 07:39:48
用JQuery内置animate方法实现数字递增动画

平时使用animate只用于dom节点的动画,无意间发现JQuery内置的animate方法可实现数字动画,JQ还是挺强大的!

动画效果为从0一步步跳到84,代码如下:

 $({
// 起始值
countNum: 0
}).animate({
// 最终值
countNum: 84
}, {
// 动画持续时间
duration: 3000,
easing: "linear",
step: function() {
// 设置每步动画计算的数值
$('#num').text(Math.floor(this.countNum));
},
complete: function() {
// 设置动画结束的数值
$('#num').text(this.countNum);
}
});