jQueryで実装！数字のカウントアップ・カウントダウンアニメーション

jQueryで実装！数字のカウントアップ・アニメーション

jQueryのanimate()メソッドを利用して、数値を「0」から目標値までカウントアップ（またはダウン）させる実装方法を解説します。実績数や統計データを動的に見せたい場合に有効です。

完成デモ

以下の「Result」タブで、ボタン操作による動作を確認できます。

実装コード

HTML、CSS、JavaScript（jQuery）の構成は以下の通りです。

1. HTML

数値表示用のspanと操作用ボタンを配置します。

<div class="card">
	<div class="card-body">
		<div id="price">
			<span>0</span>
		</div>
		<p>
			<button id="price_up" class="btn btn-raised btn-success mb-2">数値を100増やす</button>
			<button id="price_down" class="btn btn-raised btn-success mb-2">数値を100減らす</button>
		</p>
	</div>
</div>

2. CSS

レイアウトとボタンの装飾です。

.card {
    word-wrap: break-word;
    background-clip: border-box;
    background-color: #fff;
    border: 1px solid hsla(0,0%,9%,.125);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    color: #333;
    text-align: center;
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem;
    font-size: 30px;
}

.btn-success {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
    cursor: pointer;
    padding: 0.5em 1em;
    border-radius: 0.25rem;
    margin: 0 5px;
}

3. JavaScript (jQuery)

ここがアニメーションの核となる部分です。

通常、.animate()はCSS（幅や透明度など）を操作しますが、ここでは数値データそのものを徐々に変化させる手法をとっています。一時的なオブジェクト{count: price}を作成し、その数値を目標値まで変化させながら、画面上の数字を更新しています。

<!-- jQueryライブラリ本体（読込済みの場合は不要） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
$(function() {
	var price = 0; // 現在の数値を保持する変数

	// ■カウントアップ処理
	$('#price_up').click(function(){
		// {count: 現在値} から {count: 目標値} までアニメーションさせる
		$({count: price}).animate({count: price+100}, {
			duration: 1000, 
			easing: 'linear',
			// progress: アニメーションの途中で毎回実行される関数
			progress: function() {
				// 変化途中の値(this.count)を整数に丸めて表示
				$('#price span').text(Math.ceil(this.count));
			}
		});
		price += 100; // 内部の数値を更新
	});

	// ■カウントダウン処理
	$('#price_down').click(function(){
		if (price <= 0) return false;

		$({count: price}).animate({count: price-100}, {
			duration: 1000,
			easing: 'linear',
			progress: function() {
				$('#price span').text(Math.ceil(this.count));
			}
		});
		price -= 100;
	});
});
</script>

コードのポイント：

• 仮想プロパティのアニメーション: DOM要素（HTMLタグ）ではなく、{count: price} というデータ上の数値をアニメーションさせています。
• progress オプション: 値が変化するたびに実行され、現在のアニメーション進行中の値を画面（#price span）に書き込みます。
• Math.ceil(): そのままだと小数点以下の細かい数値が表示されてしまうため、切り上げて整数にしています。

---

よくある質問（FAQ）

ページ読み込み時に自動実行するには？

クリックイベントではなく、即時実行される関数内に記述します。

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

jQueryなし（Vanilla JS）で実装可能ですか？

可能です。requestAnimationFrameやsetIntervalを使用して数値加算と描画更新のループ処理を記述します。jQueryのanimateメソッドを利用する方がコード量は少なくて済みます。

動きに緩急（イージング）をつけたい場合は？

標準ではlinear（等速）とswing（緩急あり）が使えます。さらに複雑な動きが必要な場合は、「jQuery Easing Plugin」などのプラグイン導入が必要です。