In this tutorial we are going to discuss how animate number counter from zero to value using  animation JQuery library. Using this jquery number counter plugin you can easily display animation effect, here the animation makes the movement more like a sudden jump from one number to another and thereby produces just an increment effect.

Using animate function JQuery we could perform this animation and below are the options are required to perform animation effect.


duration  : amount of time in milliseconds for the animation occurrence.
easing  : easing function for transition.
step : This function provides an opportunity to modify the Tween object to change the value of the property before it is set.

Lets see the complete example to perform cool javascript animations effect number counter from zero to value.

index.html

 lang="en">


jquery Animated Number Counter from zero to value - javascript animation
 charset="UTF-8">

        body {
            background-color: #DCDCDC;
}
#container {
            width: 200px;
            border: 1px solid #d6d7da;
            padding: 2px 2px 2px 2px;
            border-radius: 5px;
            font-family: arial;
            line-height: 16px;
            color: #333333;
            font-size: 14px;
            background: #ffffff;
float: left;
            margin: 5px;
}
.count {
            line-height: 60px;
            color: black;
            margin-left: 30px;
            font-size: 25px;
}





 Number of User Online Now 

 id="container"> class="count">200


 id="container"> class="count">3300


 id="container"> class="count" id="count">20550



 style="clear:both;">


 href="#" >Check Out Our Blog.


 />
src='js/jquery.min.js'>
src="js/index.js">   

index.js

$('.count').each(function() {
    $(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
        duration: 5000,
        easing: 'swing',
        step: function(now) {
            $(this).text(Math.ceil(now));
}
});
});

jQuery(document).ready(function($) {

    setInterval(function() {
        updateValue();
}, 6000);

});

function updateValue() {

    $('#count').html(Math.floor(Math.random() * (1000 - 1)) + 1);
    $('#count').each(function() {

        $(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
            duration: 3000,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
}
});
});
}

OUTPUT :

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Jquery%20Animated%20Number%20Counter%20From%20Zero%20To%20Value

This is all about jquery animated number counter from zero to value - javascript animation. Please do comment in comment box below in case of any suggestion.