【jQuery】数字カウンターをアニメーションで実装する方法

数字を0から特定の数字まで切り替えるときにアニメーションで表示させる実装方法について今回紹介していきたいと思います。

数字をアニメーションで切り替えるときにはanimate関数を使います。

数字カウンターをアニメーションで実装

html

<div id="number-result">0</div>

jQuery

$(function(){
	let CountNum = '500';
	function numberCounterAnimation(CountNum) {
		$('#number-result').animate({
			Counter: CountNum
		}, {
			duration: 1000,
	        	easing: 'linear',
	        	step: function (now) {
	        		$(this).html(Math.ceil(now));
	        	}
		});
	}
	
	numberCounterAnimation(CountNum);
});

0から始まりどの数字までをアニメーションするかの設定はCountNumに設定します。