David Walsh Blog

jQuery Countdown Plugin

You’ve probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I’ve created a similar script but my script allows you to animate the CSS font-size of each second and present a reward at the end.

The jQuery JavaScript


jQuery.fn.countDown = function(settings,to) {
	settings = jQuery.extend({
		startFontSize: "36px",
		endFontSize: "12px",
		duration: 1000,
		startNumber: 10,
		endNumber: 0,
		callBack: function() { }
	}, settings);
	return this.each(function() {
		
		//where do we start?
		if(!to && to != settings.endNumber) { to = settings.startNumber; }
		
		//set the countdown to the starting number
		jQuery(this).text(to).css("fontSize",settings.startFontSize);
		
		//loopage
		jQuery(this).animate({
			fontSize: settings.endFontSize
		}, settings.duration, "", function() {
			if(to > settings.endNumber + 1) {
				jQuery(this).css("fontSize", settings.startFontSize).text(to - 1).countDown(settings, to - 1);
			}
			else {
				settings.callBack(this);
			}
		});
				
	});
};

Sample Usage


jQuery("#countdown").countDown({
	startNumber: 10,
	callBack: function(me) {
		jQuery(me).text("All done! This is where you give the reward!").css("color", "#090");
	}
});

The script is very customizable and the settings are self-explanatory.

Check out the MooTools version.