Count To jQuery Plugin

jQuery Plugin

by Zuhaib Siddiqui

HTML

<div id="heroCounter"></div>

JavaScript

(function($) {
$.fn.countTo = function(options) {
    if(typeof options === 'string') {
        var name = arguments[0],
            value = arguments[1];
        
        
        if(typeof value === 'undefined') { //getter
            var data = this.eq(0).data('countTo');
            return data && data[name];
        }
        return this.each(function(){
            var data = $(this).data('countTo');
            data && (data[name] = value);
        });
    }
    
    // merge the default plugin settings with the custom options
    options = $.extend({}, $.fn.countTo.defaults, options || {});

    // how many times to update the value, and how much to increment the value on each update
    var loops = Math.ceil(options.speed / options.refreshInterval),
        increment = (options.to - options.from) / loops;

    return $(this).each(function() {
        var _this = this,
            loopCount = 0,
            value = options.from,
            interval = setInterval(updateTimer, options.refreshInterval);
        
        $(this).data('countTo', options);

        function updateTimer() {
            value += increment;
            loopCount++;
            $(_this).html(value.toFixed(options.decimals, 2));

            if (typeof(options.onUpdate) == 'function') {
                options.onUpdate.call(_this, value);
            }

            if (loopCount >= loops) {
                clearInterval(interval);
                value = options.to;

                if (typeof(options.onComplete) == 'function') {
                    options.onComplete.call(_this, value);
                }
            }
        }
    });
};

$.fn.countTo.defaults = {
    from: 0,  // the number the element should start at
    to: 100,  // the number the element should end at
    speed: 2000,  // how long it should take to count between the target numbers
    refreshInterval: 100,  // how often the element should be updated
    decimals: 1,  // the number of decimal places to show
  ...