label animation on interval

Question

I am using jQuery to create a counter clock. here is my code

function timer(element) {
    var interval = 1;
    var timer_day1 = 0;
    var timer_day2 = 0;
    var timer_hour1 = 0;
    var timer_hour2 = 0;
    var timer_min1 = 0;
    var timer_min2 = 0;
    var timer_sec1 = 0;
    var timer_sec2 = 0;
    var timer_day_text = 0;
    var timer_hour_text = 0;
    var timer_min_text = 0;
    var timer_sec_text = 0;
    var timer_text = 0;
    $('<div id="div_append_timer">').appendTo("#" + element);
    $('#div_append_timer').append('<label id="lbl_timer_hour2" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_hour1" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label class="lbl_semi_class">:</label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_min2" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_min1" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label class="lbl_semi_class">:</label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_sec2" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_sec1" class="timer_class"></label>');

    setInterval(function () {
        timer_sec1 = timer_sec1 + interval;
        if (parseInt(timer_sec1) > 9) {
            timer_sec2 = parseInt(timer_sec2 + 1);
            timer_sec1 = 0;
        }
        if (parseInt(timer_sec2) > 5) {
            timer_min1 = parseInt(timer_min1) + 1;
            timer_sec2 = 0;
        }
        if (parseInt(timer_min1) > 9) {
            timer_min2 = parseInt(timer_min2) + 1;
            timer_min1 = 0;
        }
        if (parseInt(timer_min2) > 5) {
            timer_hour1 = parseInt(timer_hour1) + 1;
            timer_min2 = 0;
        }
        if (parseInt(timer_hour1) > 9) {
            timer_hour2 = parseInt(timer_hour2) + 1;
            timer_hour1 = 0;
        }
        if (parseInt(timer_hour2) > 5) {
            timer_day1 = parseInt(timer_day1) + 1;
            timer_hour2 = 0;
        }
        timer_text = timer_hour2 + timer_hour1 + ":" + timer_min2 + timer_min1 + ":" + timer_sec2 + timer_sec1;
        $('#lbl_timer_hour2').text(timer_hour2);
        $('#lbl_timer_hour1').text(timer_hour1);
        $('#lbl_timer_min2').text(timer_min2);
        $('#lbl_timer_min1').text(timer_min1);
        $('#lbl_timer_sec2').text(timer_sec2);
        $('#lbl_timer_sec1').text(timer_sec1);
    }, 1000);
}

I want to animate the label of class timer_class whenever its value is changed. I tried the .animate() function without success. I want the label to animate from top how can I do it.

here is jsfiddlelink

Check if this helps: http://stackoverflow.com/questions/16771225/css3-rotate-animation — bitoiu, Sep 15 '13 at 11:55

nnnnnn · Accepted Answer · 2013-09-15T12:40:19.893

You don't say what sort of animation you have in mind, but in a general sense one way to do this would be to write your own little plugin that you could call instead of the .text() method that you're using at the moment:

(function ( $ ) { 
    $.fn.textChangeAnimate = function(val) {
        val = "" + val;  // ensure val is a string
        return this.each(function() {
            var $el = $(this);
            if (val == $el.text()) return;      // Value unchanged, so return.

            $el.slideUp("fast", function() {    // Otherwise substitute the
                $el.text(val);                  // desired animation
            }).slideDown("fast");               // here.
        });
    };
}( jQuery ));

Then use:

$('#lbl_timer_sec1').textChangeAnimate(timer_sec1);
// instead of
$('#lbl_timer_sec1').text(timer_sec1);

Demo: http://jsfiddle.net/YP7Tz/1/

The animation I included above (and in the demo fiddle) is just the first dodgy idea that came to mind, and it doesn't look quite right, but it should give you an idea of how you could do this as far as checking when the value changes and applying some kind of animation.

As an aside, I don't have time now to offer a full critique of your existing code, but I will mention that you don't need to use parseInt() everywhere like you currently do, because all of the values you use it on are already numbers.

thanks, I was looking for the similar kind of animation. I got the Idea. — Sanjay Maharjan, Sep 16 '13 at 04:01
while I used above plugin for animation whole division of the timer is flikering unlike in jsfiddle. div_append_timer is flickering due to animation so is there any way to stop it? — Sanjay Maharjan, Sep 16 '13 at 05:40

label animation on interval

1 Answers1