Currently facing a challenge while trying to animate a number from 0 to 36.6. The issue is that the end value gets rounded up to 37 instead of displaying as 36.6, which you can observe in this fiddle: http://jsfiddle.net/neal_fletcher/0f3hxej8/
Required markup provided below:
HTML
<div id="el"></div>
jQuery:
// Animate the element's value from x to y:
$({someValue: 0}).animate({someValue: 36.6}, {
duration: 3000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#el').text(commaSeparateNumber(Math.round(this.someValue)));
},
complete:function(){
$('#el').text(commaSeparateNumber(Math.round(this.someValue)));
}
});
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.");
}
return val;
}
Looking for suggestions on how to make it animate through decimals as well, like 35.9, 36.0, 36.1, 36.2 and so on. Any help or input would be highly valued!