jQuery Animated Number Counter From Zero To Value - Javascript Animation

New updated tutorial is here, with lot of formating and theme support.

JQuery is powerful Library of JavaScript , Which makes the Web Development more Faster comparing plain JavaScript and completely useful for Beginners for building such application in minutes with lot of Functions in single line.And most powerful feature is JQuery Ajax which makes the users to relaxful usage of web app without page reloading and easy for developers to work with callbacks.Jquery is also famous for it's Animation and making app more amazing and pleasing with speed, fade etc..
There are also lot of library which are built upon JQuery as Library,such as Bootstrap and so on.

Install : Demo & Download

You must need Jquery.js library use just cdn from google.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Jquery:

Using animate function JQuery we could perform this animation,here is the actual Documentation

• first argument is CSS property ,which we would generally used to animate.
• second argumet as option

option : 

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

Logic css with Javascript :

We get the count span counter CSS property starting from zero within a for each loop in jquery and setting the Counter as text by CSS property inside animation function and next comes option which has SWING as transition and then with duration and finally comes step option which is used to once again change the value before set and rounded off with math.ceil function.

Code and Demo :

Demo might load slow.have a look at demo hosted +codepen.ReRun the Code to see the counter changes!

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

See the Pen FatiB by s.shivasurya (@shivasurya) on CodePen.

Hope You have Enjoyed this post.Since it was cool one actually showing up in most of the modern websites , which made me to search and compile to perform this animated counter.and a reader too requested via me in Facebook to do with JQuery.

For Errors/Comments/Bugs/Hugs mail me [email protected] or connect with me in Facebook/Twitter you can raise your exceptions/messages!
share is care.

Read More