simple Countdown Plugin jQuery
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 $(this).text(to).css('fontSize',settings.startFontSize); //loopage $(this).animate({ 'fontSize': settings.endFontSize },settings.duration,'',function() { if(to > settings.endNumber + 1) { $(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1); } else { settings.callBack(this); } }); }); };
Sample Usage
$('#countdown').countDown({ startNumber: 10, callBack: function(me) { $(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.
The article source:http://davidwalsh.name/jquery-countdown-plugin
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu