jquery.countTo.js (2501B)
1 (function ($) { 2 $.fn.countTo = function (options) { 3 options = options || {}; 4 5 return $(this).each(function () { 6 // set options for current element 7 var settings = $.extend({}, $.fn.countTo.defaults, { 8 from: $(this).data('from'), 9 to: $(this).data('to'), 10 speed: $(this).data('speed'), 11 refreshInterval: $(this).data('refresh-interval'), 12 decimals: $(this).data('decimals') 13 }, options); 14 15 // how many times to update the value, and how much to increment the value on each update 16 var loops = Math.ceil(settings.speed / settings.refreshInterval), 17 increment = (settings.to - settings.from) / loops; 18 19 // references & variables that will change with each update 20 var self = this, 21 $self = $(this), 22 loopCount = 0, 23 value = settings.from, 24 data = $self.data('countTo') || {}; 25 26 $self.data('countTo', data); 27 28 // if an existing interval can be found, clear it first 29 if (data.interval) { 30 clearInterval(data.interval); 31 } 32 data.interval = setInterval(updateTimer, settings.refreshInterval); 33 34 // initialize the element with the starting value 35 render(value); 36 37 function updateTimer() { 38 value += increment; 39 loopCount++; 40 41 render(value); 42 43 if (typeof(settings.onUpdate) == 'function') { 44 settings.onUpdate.call(self, value); 45 } 46 47 if (loopCount >= loops) { 48 // remove the interval 49 $self.removeData('countTo'); 50 clearInterval(data.interval); 51 value = settings.to; 52 53 if (typeof(settings.onComplete) == 'function') { 54 settings.onComplete.call(self, value); 55 } 56 } 57 } 58 59 function render(value) { 60 var formattedValue = settings.formatter.call(self, value, settings); 61 $self.text(formattedValue); 62 } 63 }); 64 }; 65 66 $.fn.countTo.defaults = { 67 from: 0, // the number the element should start at 68 to: 0, // the number the element should end at 69 speed: 1000, // how long it should take to count between the target numbers 70 refreshInterval: 100, // how often the element should be updated 71 decimals: 0, // the number of decimal places to show 72 formatter: formatter, // handler for formatting the value before rendering 73 onUpdate: null, // callback method for every time the element is updated 74 onComplete: null // callback method for when the element finishes updating 75 }; 76 77 function formatter(value, settings) { 78 return value.toFixed(settings.decimals); 79 } 80 }(jQuery));