Javascript 与setInterval（）冲突的动画

我在我的网站上做了一些倒计时的脚本，它在所有的截止日期类上循环并改变时钟

这是密码

self.setInterval(function(){
$('.deadline_container').each(function(){
    days = parseInt($(this).children('.deadline_days').html(),10);
    time = $(this).children('.deadline_time').html().split(':');
    hours = parseInt(time[0],10);
    minutes = parseInt(time[1],10);
    seconds = parseInt(time[2],10);
    if(seconds > 0){
        seconds -= 1;
    } else if(minutes > 0){
        minutes -= 1;
        seconds = 59;
    } else if(hours > 0){
        hours -= 1;
        minutes = 59;
        seconds = 59;
    } else if(days > 0){
        days -= 1;
        hours = 23;
        minutes = 59;
        seconds = 59;
    }
    sec = (seconds < 10) ? '0' + seconds : seconds;
    min = (minutes < 10) ? '0' + minutes : minutes;
    hh = (hours < 10) ? '0' + hours : hours;
    $(this).children('.deadline_days').html(days);
    $(this).children('.deadline_time').html([hh,min,sec].join(':'));
});
}, 1000);

这两段代码工作得很好，动画没有任何问题，问题是当间隔运行时，我将其中一个div悬停在overlay上，overlay动画冻结，直到倒数计时一秒。有时看起来好像没有动画，只是突然出现叠加。有时看起来不错，这完全取决于我悬停div的瞬间。我认为setInterval函数会停止动画队列，直到它停止执行自己的代码

我认为jquery或类似的东西上没有线程

因此，问题是：

？如何在不依赖时钟间隔的情况下使重叠动画平滑

有没有更有效的方法来进行倒计时或叠加动画

我正在使用jQuery1.8.2和jQueryUI1.9.0

编辑

我以前没有意识到，我也有一个不透明度的变化，像这样：

$('#top_bar, #top_bar_container').hover(
    function(event){
        $(this).stop().animate({backgroundColor:"rgba(0,0,0,0.5)"}, 300);
    },
    function(event){
        $(this).stop().animate({backgroundColor:"rgba(0,0,0,0.2)"}, 1000);
    }
);

不管发生什么，动画都能顺利运行
因此，它可能是live功能（我需要它，因为我使用AJAX向页面添加内容）或背景动画的不透明动画（可能在CPU方面更昂贵）

任何帮助都将不胜感激，谢谢

编辑
这是我的DOM

<div class="someDivClass">
    <div class="background">
        <div class="overlay">
            <div class="deadline">
                <div>Time Left</div>
                <div class="deadline_container">
                    <div class="deadline_days">14</div>
                    <div class="deadline_time">23:20:51</div>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </div>
    </div>
</div>  

剩下的时间
14
23:20:51

我的页面上有很多这样的容器。

我解决了这个问题。
实际上，这不是一个jQuery动画或javascript setInterval（）问题，而是Google Chrome本身的问题

我试过这个：

如前所述，我将第一个代码更改为setTimeout（）

我将.live（）更改为$（document）.on（'mouseover'，'.someDivClass'，function（）{…}）

但所有这些都没有解决问题，所以在这里和那里进行测试，我优化了我网站上的图像，问题就解决了

我认为会发生什么：
Chrome无法在大型图像上渲染带有不透明背景的动画div，因为当我将.background类图像缩小时，动画延迟消失了

我在Firefox15.0.1上测试了一开始的代码，没有任何延迟

---

无论如何，谢谢你的回答，我对动画再也没有问题了

你从

setInterval

运行第一个代码吗？哎哟，从setInterval运行的唯一代码是第一个，很抱歉我没有解释清楚，让我们看看你的DOM。您的

.deadline\u容器

s（包含

.deadline\u天数

和

.deadline\u时间

s）与

.someDivClass

元素及其覆盖层以及

\top\u bar

和

\top\u bar\u容器

s之间的关系如何？我已经添加了它，请检查editjavascript是否为单线程。除非你使用网络工作者

<div class="someDivClass">
    <div class="background">
        <div class="overlay">
            <div class="deadline">
                <div>Time Left</div>
                <div class="deadline_container">
                    <div class="deadline_days">14</div>
                    <div class="deadline_time">23:20:51</div>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </div>
    </div>
</div>