HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

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がエフェクトになります。

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

0

 

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

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を引いてアニメーションを実行します。

このエントリーをはてなブックマークに追加

Monthly Archives

Search