Javascript 在间隔上标记动画

我正在使用jQuery创建计数器时钟。这是我的密码

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);
}

功能定时器（元件）{
var区间=1；
var timer_day1=0；
var timer_day2=0；
var timer_hour1=0；
var timer_hour2=0；
var定时器_min1=0；
var定时器_min2=0；
var定时器_sec1=0；
var定时器_sec2=0；
变量计时器\u天\u文本=0；
var timer\u hour\u text=0；
var timer_min_text=0；
变量计时器秒文本=0；
var timer_text=0；
$（''）。附加到（“#”+元素）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
$（“#div_append_timer”）.append（“：”）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
$（“#div_append_timer”）.append（“：”）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
$（'#div_append_timer'）。append（''）；
setInterval（函数（）{
定时器_sec1=定时器_sec1+间隔；
如果（parseInt（计时器_sec1）>9）{
定时器_sec2=parseInt（定时器_sec2+1）；
定时器_sec1=0；
}
如果（parseInt（计时器_sec2）>5）{
timer_min1=parseInt（timer_min1）+1；
定时器_sec2=0；
}
如果（parseInt（计时器最小1）>9）{
timer_min2=parseInt（timer_min2）+1；
定时器_min1=0；
}
如果（parseInt（计时器最小值2）>5）{
timer\u hour1=parseInt（timer\u hour1）+1；
定时器_min2=0；
}
如果（parseInt（计时器时间1）>9）{
timer\u hour2=parseInt（timer\u hour2）+1；
计时器1小时=0；
}
如果（parseInt（计时器时间2）>5）{
timer_day1=parseInt（timer_day1）+1；
计时器_hour2=0；
}
timer_text=timer_hour2+timer_hour1+”：“+timer_min2+timer_min1+”：“+timer_sec2+timer_sec1；
$（'lbl_timer_hour2'）。文本（timer_hour2）；
$（'lbl_timer_hour1'）。文本（timer_hour1）；
$（'#lbl_timer_min2'）.text（timer_min2）；
$（'lbl_timer_min1'）。文本（timer_min1）；
$（'lbl_timer_sec2'）。文本（timer_sec2）；
$（'#lbl_timer_sec1'）。文本（timer_sec1）；
}, 1000);
}

我想在类timer\u class的值更改时设置其标签的动画。我尝试了.animate（）函数，但没有成功。我想让标签从顶部动画我怎么能做到这一点

---

这里是JSFIDLE

你没有说你想要什么类型的动画，但一般来说，一种方法是编写你自己的小插件，你可以调用它，而不是你现在使用的

.text（）

方法：

(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 ));

然后使用：

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

演示：

我上面提到的动画（以及在演示小提琴中提到的动画）只是我想到的第一个狡猾的想法，它看起来不太正确，但它应该让你知道如何做到这一点，比如检查值何时发生变化并应用某种动画

---

顺便说一句，我现在没有时间对您现有的代码进行全面的评论，但我要提到的是，您不需要像现在这样到处使用

parseInt（）

，因为您在上面使用它的所有值都已经是数字了。

您可以使用JSFIDLE吗？检查这是否有帮助：谢谢，我在寻找类似的动画。当我使用上面的插件制作动画时，计时器的整个部分都在飞，不像JSFIDLE。div_append_计时器因动画而闪烁，是否有方法停止？