我制作了一些脚本来在我的网站上进行倒计时,它在所有截止日期类上循环并更改时钟。
这是代码
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>
我的页面上有很多这样的容器。
最佳答案
我解决了这个问题。
实际上这不是 jQuery animate 或 javascript setInterval() 问题,而是 Google Chrome 浏览器本身。
我试过这个:
作为philipp说,我把第一段代码改成setTimeout()
我将 .live() 更改为 $(document).on('mouseover', '.someDivClass', function(){...});
但是这些都没有解决问题,所以到处测试我优化了我网站上的图片,问题就解决了!
我认为会发生什么:
Chrome 在大图像上渲染带有不透明背景的动画 div 时出现问题,因为当我将 .background 类图像变小时,动画延迟消失了。
我在 Firefox 15.0.1 上测试了我一开始的代码,完全没有延迟。
无论如何感谢您的回答,我不再对动画有任何问题
关于javascript - 与 setInterval() 冲突的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13292534/