index.html

<!DOCTYPE html> <html lang = "en" > <head> <title> jquery animated number counter from zero to value - javascript animation </title> <meta charset = "UTF-8" > <style> 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 ; } </style> </head> <body> <h1> Number of User Online Now </h1> <div id = "container" ><span class = "count" > 200 </span> </div> <div id = "container" ><span class = "count" > 3300 </span> </div> <div id = "container" ><span class = "count" id = "count" > 20550 </span> </div> <div style = " clear : both ; " > <br/> <a href = "#" > Check Out Our Blog. </a> </div> <br /> <script src = 'js/jquery.min.js' ></script> <script src = "js/index.js" ></script> </body> </html>

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 )); } }); }); }

In this tutorial we are going to discuss howUsing thisyou can easily displayhere 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.: amount of time in milliseconds for the animation occurrence.: easing function for transition.: 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.This is all aboutPlease do comment in comment box below in case of any suggestion.