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

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

<div id="ict_number">0</div>
<button id="ict_jquery_num_animation_btn">数字をカウントアップする</button>

$(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();
		})
	);
});

<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>

$(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());
		})
	);
});

<div id="ict_number_js">0</div>
<div><button id="ict_num_animation_btn_js">数字をカウントアップする</button></div>

const ict_number_js = document.getElementById("ict_number_js");
const btn = document.getElementById("ict_num_animation_btn_js");
const animateCountBtn = ((target) => {
	const current = parseInt( ict_number_js.textContent, 10 );
	const duration = 5000;
	const diff = target - current;
	
	let count = diff / ( 60 * (duration / 1000) );
	const absolute_count = count;
	
	const update = () => {
		const result = current + parseInt(count, 10);
	  	ict_number_js.textContent = result.toLocaleString();
	  	if ( target >= result ) {
	    	requestAnimationFrame(update);
	  	} else {
	    	ict_number_js.textContent = target.toLocaleString();
	  	}
	  	count = count + absolute_count;
	}
	requestAnimationFrame(update);
});
btn.addEventListener("click", (event) => {
	animateCountBtn(5000);
});

<div id="ict_number_select_js">0</div>
<select id="ict_num_animation_select_js">
	<option value="0">選択してください</option>
	<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>

const ict_number_select_js = document.getElementById("ict_number_select_js");
const select = document.getElementById("ict_num_animation_select_js");
const animateCountSelect = ((target) => {
	const current = parseInt( ict_number_select_js.textContent, 10 );
	const duration = 300;
	const diff = target - current;
	
	let count = diff / ( 60 * (duration / 1000) );
	const absolute_count = count;
	
	const update = () => {
		const result = current + parseInt(count, 10);
		let flg;
		if ( target > current ) {
			flg =  target >= result;
		} else {
			flg =  target < result;
		}
		ict_number_select_js.textContent = result;
		if (flg) {
			requestAnimationFrame(update);
		} else {
	    	ict_number_select_js.textContent = target;
	  	}
	  	count = count + absolute_count;
	}
	requestAnimationFrame(update);
});
select.addEventListener("change", (event) => {
	animateCountSelect(event.target.value);
});