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

更新日
2022年11月1日
作成日
2022年6月29日

JQuery(Javascript)で数字をカウントアップ・カウントダウンするにはanimate関数で実現することが可能です。

JQueryで数字をカウントアップするアニメーションのソースコード

はじめに、JQueryで数字をカウントアップするアニメーションの基本となるソースコードについて記載します。

Javascriptソースコード

$(function(){
	$('#number').animate({
		Counter: 5000
	}, {
		duration: 5000,
		easing: 'linear',
		step: function (now, fx) {
			$(this).html(Math.ceil(now));
		}
	});
});

Counter: 5000の箇所に最終的に表示したい数字を入力します。上記の例で言いますと、0から(初期値として0の場合)5000のカウントアップアニメーションを行うことになります。

duration: 5000の箇所に何秒間かけてアニメーションを行うかを記述します。1000 = 1秒ですので、上記の例では5000 = 5秒かけてアニメーションを行うことになります。

step: function (now, fx) 箇所の引数nowには0から5000までの数値が代入されます。上記の例では0〜1秒間に0〜1000が代入され、1〜2秒の間に1001〜2000が代入され、その繰り返しで5000までの値が代入されます。

この仕組みを利用して数字のカウントアップおよびカウントダウンアニメーションを実現します。

easing: ‘linear’について、jQuery API Documentationについてご確認ください。

参考:.animate() | jQuery API Documentation

以下では、ボタンを押して数字をカウントアップする方法、セレクトボタンを選択して数字をカウントアップする方法の例を記載します。

ボタンを押して数字をカウントアップする方法

ボタンを押して数字をカウントアップする方法は以下のようなソースコードで実現が可能です。

HTMLソースコード

<div id="ict_number">0</div>
<button id="ict_jquery_num_animation_btn" class="btn_main" style="display:block;">数字をカウントアップする</button>

Javascriptソースコード

$(function(){
	
	function ict_jquery_num_animation_btn_action() {
		$('#ict_number').animate({
			Counter: 5000
		}, {
			duration: 5000,
	        easing: 'linear',
	        step: function (now) {
	            $(this).html(Math.ceil(now));
	        }
		});
	}
			
	$(document).on('click', '#ict_jquery_num_animation_btn', (function() {
			ict_jquery_num_animation_btn_action();
		})
	);
});

実装例

0

セレクトボタンを選択して数字をカウントアップ・カウントダウンする方法

セレクトボタンを選択して数字をカウントアップ・カウントダウンする方法は、以下のようなソースコードで実現が可能です。

HTMLソースコード

<div id="ict_number_select">0</div>
<select id="ict_jquery_num_animation_select">
	<option value="5000">5,000円</option>
	<option value="6000">6,000円</option>
	<option value="7000">7,000円</option>
	<option value="8000">8,000円</option>
	<option value="9000">9,000円</option>
	<option value="10000">10,000円</option>
</select>

Javascriptソースコード

$(function(){
	
	function ict_jquery_num_animation_select_action(to) {
		$('#ict_number_select').animate({
			Counter: to
		}, {
			duration: 300,
	        easing: 'linear',
	        step: function (now) {
	            $(this).html(Math.ceil(now));
	        }
		});
	}
			
	$(document).on('change', '#ict_jquery_num_animation_select', (function() {
			ict_jquery_num_animation_select_action($(this).val());
		})
	);
});

実装例

0

以上ですが、JQuery(javascript)で数字のカウントアップ・カウントダウンするアニメーションの実装方法でした。

ICTよろず相談所ではホームページ制作に関するご相談を受付しております。JQuery(Javascript)でお悩みの事がございましたらご相談ください。

  • 有償のサポートを希望する

    ICTよろず相談所は、ホームページ制作、ネットショップ開業・運用、ブログ運用、SNS運用などインターネットに関する事業支援を行なっております。