2

我制作了一些脚本来在我的网站上进行倒计时，它会在所有截止日期课程上循环并更改时钟。

这是代码

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 上显示覆盖

$('.someDivClass').live({
    mouseover: function() {
        $(this).children('.background').children('.overlay').stop().animate({opacity:"1"}, 300);
    },
    mouseout: function() {
         $(this).children('.background').children('.overlay').stop().animate({opacity:"0"}, 300);
    }
});

这两段代码效果很好，动画没有任何问题，问题是当间隔运行并且我将其中一个带有覆盖的 div 悬停时，覆盖动画会冻结，直到倒计时一秒钟。有时看起来好像没有动画，只是突然出现了覆盖。有时看起来不错，这完全取决于我悬停 div 的那一刻。我认为 setInterval 函数会停止动画队列，直到它停止执行自己的代码。

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

所以问题是：

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

¿ 是否有更有效的方法来制作倒计时或叠加动画？

我正在使用 jquery 1.8.2 和 jQuery UI 1.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);
    }
);

无论如何，该动画运行流畅！
所以它可能是实时功能（我在使用 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>

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

4

1 回答 1

0

我解决了这个问题。
实际上，这不是 jQuery animate 或 javascript setInterval() 问题，而是 Google Chrome 本身。

我试过这个：

正如菲利普所说，我将第一个代码更改为 setTimeout()

我将 .live() 更改为 $(document).on('mouseover', '.someDivClass', function(){...});

但是这些都没有解决问题，所以在这里和那里测试我优化了我网站上的图像，它已经解决了！

我认为会发生什么：
Chrome 在 LARGE 图像上渲染具有不透明背景的动画 div 时出现问题，因为当我将 .background 类图像变小时，动画滞后消失了。

我在 Firefox 15.0.1 上测试了我一开始的代码，完全没有滞后。

无论如何，感谢您的回答，我不再有动画问题了

于 2012-11-09T16:32:39.197 回答