jQueryで数字のカウントアップ（ダウン）アニメーションを実装する

jQueryで数字がカウントアップ、または、カウントダウンするアニメーションを実装します。

ショッピングサイトや保険見積もりサイトなどで、商品やオプションを選択すると、合計金額がカウントするアニメーションをよく見かけます。
今回、それを実装する機会があったので、ここにメモとして残しておきます。

例えば、以下のHTMLの金額の数字部分をカウントするとします。

<div id="price">
<span>0</span> 円
</div>

0から1000へアニメーションを実行するJavaScriptコードは以下のとおりです。

$({count: 0}).animate({count: 1000}, {
	duration: 1000,
	easing: 'linear',
	progress: function() { 
	    $('#price span').text(Math.ceil(this.count)); 
	}
});

変数countに0から1000までの値を断続的にセットすることで、アニメーションを実現します。
durationがアニメーションの長さです。単位はミリ秒ので上記は1秒です。easingがエフェクトになります。

これを応用したデモがこちらです。

プログラムは以下のとおりです

var price = 0;
$('#price_up').click(function(){
	$({count: price}).animate({count: price+100}, {
		duration: 1000,
		easing: 'swing',
		progress: function() { 
		    $('#price span').text(Math.ceil(this.count)); 
		}
	});
	price+=100;
});
$('#price_down').click(function(){
	$({count: price}).animate({count: price-100}, {
		duration: 1000,
		easing: 'swing',
		progress: function() { 
		    $('#price span').text(Math.ceil(this.count)); 
		}
	});
	price-=100;
});

「id=”price_up”」のボタン「数値を100増やす」をクリックすると、現在の値に100を加えてアニメーションを実行します。
「id=”price_down”」のボタン「数値を100減らす」をクリックすると、現在の値から100を引いてアニメーションを実行します。

小数点以下の値からカウントアップする方法

リクエストがあったので、小数点以下のカウントアップデモを設定しました。

プログラムは以下の通りです。

var price2 = 0;
$('#price2_up').click(function(){
	$({count: price2}).animate({count: price2+100}, {
		duration: 1000,
		easing: 'swing',
		progress: function() { 
		    $('#price2 span').text(Math.ceil(this.count)/100); 
		},
		complete: function(){
			$('#price2 span').text('1.00');
		}
	});
	price2+=100;
});
$('#price2_down').click(function(){
	$({count: price2}).animate({count: price2-100}, {
		duration: 1000,
		easing: 'swing',
		progress: function() { 
		    $('#price2 span').text(Math.ceil(this.count)/100); 
		},
		complete: function(){
			$('#price2 span').text('0.00');
		}
	});
	price2-=100;
});

JavaScriptでは「小数点第2位以下を切り捨て」といった処理が困難なため、「Math.ceil(this.count)/100」として、1から100までのカウント中の値を100で割った結果を表示させています。
また、型が整数の1または0を「1.00」「0.00」と出力はできません。そこで、カウント処理終了後に文字型で「1.00」「0.00」を設定します。