How to create a countup between two numbers with Jquery with intervals 15 and slowdown similar to the GIF image below?
I can’t reproduce this effect.
$('.count').each(function () {
var $this = $(this);
jQuery({ Counter: 1243234 }).animate({ Counter: $this.attr('data-stop') }, {
useGrouping: true,
separator: ".",
decimal: ",",
speed: 99999,
duration: 9999999,
refreshInterval: 300,
easing: 'swing',
step: function (now) {
$this.text(Math.ceil(now));
}
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<span class="count" data-stop="3256986">3256986</span> Total downloads <br>
</body>
</html>
2
Answers
To replicate what you have in the GIF, you could create a simple 1-second interval that changes the value of an element’s textContent property. Below is a simple approach. You should update it to make sure the start value and end value are valid, etc.
Other ways to improve would be to make this a Promise, which resolves when the final number is met. Or pass it a callback function which can be called once the process is complete. Here’s how you could use Promises to determine when the counting has completed:
Here’s a jquery solution using
.data
to store the current value and setTimeout to loop. Change the timeout (150 here) to adjust the speed. Same concepts can be used for a non-jquery solution.Storing the current value in the element’s data means: