I've been able to animate a number from zero using this code:
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
However I need to display my number with commas, like 30,000,000. When I do so this code fails. Is there a simple way to make it work with such format?
You can add
.toLocaleString('en')
To the step property:
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString('en'));
}
You can also pass in navigator.language rather than 'en' and the decimals will be displayed according to the users browser language setting.
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
now = Number(Math.ceil(now)).toLocaleString('en');
$(this).text(now);
}
});
});
it can be done using a replace with regex:
$(function(){
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
}
});
});
});#shiva
{
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
float:left;
margin:5px;
}
.count
{
line-height: 100px;
color:white;
margin-left:30px;
font-size:25px;
}
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float:left;
margin:20px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
.linker
{
font-size : 20px;
font-color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shiva"><span class="count">200</span></div>
<div id="shiva"><span class="count">10000</span></div>
<div id="shiva"><span class="count">8530</span></div>
<div id="shiva"><span class="count">1540</span></div>
<div id="shiva"><span class="count">10</span></div>
<div id="shiva"><span class="count">87</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">1421</span></div>
<div id="talkbubble"><span class="count">145</span></div>
<div id="talkbubble"><span class="count">78</span></div>
<br />
<br />
<a class="linker" href="http://www.i-visionblog.com/2014/11/jquery-animated-number-counter-from-zero-to-value-jquery-animation.html" target="_blank">visit Tutorial in Blog</a>
<br />
I needed something very similar to what you want except I needed to be able to animate changes in dollars and cents (similar to a Turbotax counter). I couldn't find anything helpful online so I hacked this together from several examples on SO. The key is to use the step callback function to format the value as you please. The cool thing is this works whether you're going up or down in the value.
Hope this code helps you.
<div id="total">$9.99</div>
<script>
//NOTE: Always work with currency in total value in cents,
//hence the need for .toMoney() and .fromMoney()
var $total = jQuery("#total");
var finaltotal = 29999; //$299.99
var currval = $total.text().fromMoney();
//only animate if the values are different
if(currval !== finaltotal) {
console.log("start: " + currval);
console.log("end: " + finaltotal);
$({"counter": currval })
.animate({ counter: finaltotal },
{
duration: 500,
easing: "swing",
step: function() {
$total.text( this.counter.toMoney() );
},
complete: function() {
//animate is a bit off more often than not.
//Nobody will notice if the animation happens quickly
//so after the animate is done we slam in the final value.
$total.text( finaltotal.toMoney() );
console.log("animate complete");
}
});
}
//Convert a currency string (with or without dollar sign or commas)
//to an integer representing total value in cents
//E.g.: $149.99 becomes 14999
String.prototype.fromMoney = function() {
return parseInt(this.replace(/^\$/,'').replace(/,/g, '').replace(/\./, ''));
}
//Convert a given integer representing only cents ($149.99 = 14999) to a
//proper, comma delimited US dollar amount with the dollar sign
//Modern browsers from IE 11 onward support
//foo.toLocaleString("en-US", {style:"currency", currency:"USD"});
//but the method below works for most older browsers.
//Found on SO @ http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript
Number.prototype.toMoney = function(c, d, t) {
var n = this/100,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + "$" + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3}) (?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}
</script>
You can format the entire Strings at the end of a stepped animation like so:
$('.count').each(function () {
var obj = $(this);
jQuery({Counter: 0}).animate({Counter: obj.attr('data-stop')}, {
duration: 1000,
easing: 'swing',
step: function (now) {
obj.text(Math.ceil(now));
},
complete : function(){
obj.text(Math.ceil(obj.text()).toLocaleString('en'));
}
})
});
(I used Shankar's Script jQuery Count Numbers Up)
