Databases
StackOverflow2013
Postsdbo
POlabel animation on interval
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POlabel animation on interval
    text
    copied!<p>I am using jQuery to create a counter clock. here is my code</p> <pre><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; $('&lt;div id="div_append_timer"&gt;').appendTo("#" + element); $('#div_append_timer').append('&lt;label id="lbl_timer_hour2" class="timer_class"&gt;&lt;/label&gt;'); $('#div_append_timer').append('&amp;nbsp;&amp;nbsp;'); $('#div_append_timer').append('&lt;label id="lbl_timer_hour1" class="timer_class"&gt;&lt;/label&gt;'); $('#div_append_timer').append('&amp;nbsp;&amp;nbsp;'); $('#div_append_timer').append('&lt;label class="lbl_semi_class"&gt;:&lt;/label&gt;'); $('#div_append_timer').append('&amp;nbsp;&amp;nbsp;'); $('#div_append_timer').append('&lt;label id="lbl_timer_min2" class="timer_class"&gt;&lt;/label&gt;'); $('#div_append_timer').append('&amp;nbsp;&amp;nbsp;'); $('#div_append_timer').append('&lt;label id="lbl_timer_min1" class="timer_class"&gt;&lt;/label&gt;'); $('#div_append_timer').append('&amp;nbsp;&amp;nbsp;'); $('#div_append_timer').append('&lt;label class="lbl_semi_class"&gt;:&lt;/label&gt;'); $('#div_append_timer').append('&amp;nbsp;&amp;nbsp;'); $('#div_append_timer').append('&lt;label id="lbl_timer_sec2" class="timer_class"&gt;&lt;/label&gt;'); $('#div_append_timer').append('&amp;nbsp;&amp;nbsp;'); $('#div_append_timer').append('&lt;label id="lbl_timer_sec1" class="timer_class"&gt;&lt;/label&gt;'); setInterval(function () { timer_sec1 = timer_sec1 + interval; if (parseInt(timer_sec1) &gt; 9) { timer_sec2 = parseInt(timer_sec2 + 1); timer_sec1 = 0; } if (parseInt(timer_sec2) &gt; 5) { timer_min1 = parseInt(timer_min1) + 1; timer_sec2 = 0; } if (parseInt(timer_min1) &gt; 9) { timer_min2 = parseInt(timer_min2) + 1; timer_min1 = 0; } if (parseInt(timer_min2) &gt; 5) { timer_hour1 = parseInt(timer_hour1) + 1; timer_min2 = 0; } if (parseInt(timer_hour1) &gt; 9) { timer_hour2 = parseInt(timer_hour2) + 1; timer_hour1 = 0; } if (parseInt(timer_hour2) &gt; 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); } </code></pre> <p>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.</p> <p>here is jsfiddle<a href="http://www.jsfiddle.net/YP7Tz/" rel="nofollow">link</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload