jQuery addClass example

Change class name on click in jQuery

by dukonst

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.min.js"></script>
<span class="sdelaliCount" data-count="504">0</span>
<span class="sdelaliCount" data-count="105">0</span>
<span class="sdelaliCount" data-count="495">0</span>
<span class="sdelaliCount" data-count="1024">0</span>
<span id="countdown"></span>

CSS

span{
  display:block;
}
body{
  height:500px;
}

JavaScript

$(document).ready(function() {
const windowHeight = $(window).height(),
	$this = $(".sdelaliCount");
	let countFlag = false;

	$(document).on('scroll', function() {
		$this.each(function() {
			var tcount = $this.data("count");
			height = $this.offset().top + $this.height();
			if ($(document).scrollTop() + windowHeight >= height && !countFlag) {
				countFlag = true;
				$this.animateNumber({ number: tcount, easing: 'easeInQuad'}, 1000, function() {
		      $('#countdown').text('Countdown completed!')
		    });
			}
		});
	});
  })