jQueryで数字をアニメーションさせて表示させる方法

件数とか数字をアニメーションで出したいときの方法を紹介していきたいと思います。

方法はいくつかありますが今回はjQueryで簡単に出せる方法になります。

数字アニメーションの作り方

html

まずは数字部分のhtmlになります。

<span id="num-count">999</span>件

jQuery

<script>
jQuery('#num-count').each(function () {
	jQuery(this).prop('num',0).animate({
		num: jQuery(this).text();
	}, {
		duration: 300,
		step: function (now) {
		jQuery(this).text(Math.ceil(now));
	}
	});
});
</script>

jQueryのanimeteメソッドを使うことで簡単にアニメーションをさせることができます。

簡単に説明すると「duration」はアニメーションの時間になります。

アニメーションの種類を指定したい場合は「easing」を使います。

サンプル