884 Time & Clock

Плагин обратного отсчета на jQuery


Позволяет анимировать таймер обратного отсчета изменяя размер шрифта.

JS

Вот сам плагин:

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);
            }
        });
                
    });
};
А вот код его вызова:
$('#countdown').countDown({
    startNumber: 10,
    callBack: function(me) {
        $(me).text('Время вышло!').css('color','#090');
    }
});
Скачать 291Загрузок 2,05 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи