jQuery Animated Number Counter From Zero To Value - Javascript Animation

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 s.shivasurya@gmail.com or connect with me in Facebook/Twitter you can raise your exceptions/messages!
share is care.

Read More

Title bar Alert like Facebook Chat messages - read more @i-visionblog

We would have experienced this when we chat in Facebook,the chat box just blinks or Title bar just blinks.have you ever wondered how does they work.yes, they work just because of Javascript .This makes us easy visible of tabs and noticing it while working on any other tab in the browser.

Add caption

here is the Javascript download link : Download  | Demo

View the Demo Source Code to Implement the tile Bar Alert in your app correspondingly!

How Do they work ?

when you receive a response from the database new entry through Ajax or Node.js sockets may be anyother,the response is passed through this javascript functions and then the javascript start doing it process of title alert in the browser.And when the user clicks on it then the function comes to the end and goes on! this is how many things are happens in the advanced sites like Facebook ,Google etc.

Why Do they Implement this ?

This Tends to be visible for the users and to pull attraction towards the tab! were nowadays many uses notify tone with these to make users to experience more comfortable.While the users are working more than a tab in the system,this may surely help them to interpret them and find difference.

Procedure :

see the highlighted code below! this may be useful wherever you want and implementating this!

<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
 <script src="../jquery.titlealert.js"></script>
 <script type="text/javascript" >
  $( document ).ready(function() {
$("#ajax").click(function(e){
$.ajax({
type: "GET",
url: "data.php",
success: function(data){
$.titleAlert(data);
}
}); //end of ajax 
}); //end of click event
}); //end of document

</script>

Other Options :

Compatibility:

Title Alert works with jQuery 1.3 and 1.4. It's tested in Firefox, Chrome, Internet Explorer >= 6 and Safari.

Please Report for Bugs/Corrections/Errors/Help/hugs to s.shivasurya@gmail.com or chat with me in Facebook/G+ and connect with me in Twitter.Share is Care.

Read More