- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我制作了一些脚本来在我的网站上进行倒计时,它在所有截止日期类上循环并更改时钟。
这是代码
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/
我的工作是将每条记录写入 Hadoop 映射中的 DynamoDB。 我无法使用具有 httpclient-4.2.5.jar 和 httpcore-4.2.5.jar 的 Hadoop 2.6 运行
我在 JavaScript 中嵌套了循环开关,例如: for (var i = 0; i < checkBoxIds.length; i++) { if ($('#' + checkB
我有一个文件夹被重命名的分支。现在我正在尝试合并从主干到这个分支的更改,但是在主干中修改的文件仍然在原始文件夹名称下,因此 svn 引发了树冲突。我该如何解决这个问题? 该文件夹已使用 svn ren
我在使用 jquery 暴露插件和 Masked 输入插件时遇到了问题。问题是它们都占用 $.mask 函数,从而导致冲突。但我非常需要这两个插件一起工作。我会将其中一个中的 $.mask 重命名为.
我正在尝试为我所有的 INPUT 元素做一个简单的 :focus 效果,就像这样: INPUT:focus { border-color: orange; } 这很好用,直到我将这段 CSS 添加到样
我是 javascript 的新手。 在 wordpress 上工作,我在自定义 js 中为我的主题输入了以下函数: document.getElementsByName("empty_cart")[
为什么有些 javascript 会与其他的发生冲突?我的意思是我一直在为图片库使用 javascript 代码,然后尝试在 jquery 中获取文本水印。为什么在使用 jquery 之后,画廊完全消
是否可以根据已知的输入值创建 MD5 碰撞? 所以例如我有输入字符串 abc与 MD5 900150983cd24fb0d6963f7d28e17f72 . 现在我想将字节添加到字符串 def获得相同
我在我的项目中使用原型(prototype): NodeParser.prototype.getChildren = function(parentContainer) { return fl
根据我对 merge 冲突的理解,当两个人更改了同一文件和/或修改了该文件中的同一行时,就会发生 merge 冲突。所以当我做一个 git pull origin master 我期望 merge 冲
iPad 上 Mobile Safari 中的 HTML5 模板。带 iScroll 的 Div 工作正常。 if/else 语句中还包含一个 jQuery 函数。该函数测试用户是否在 iScroll
我一直在尝试使 2 个脚本(1 个 mootol 和 1 个 jquery)在同一页面上工作,但没有成功。我一直在研究许多论坛等,但我仍然无法使这两个脚本同时工作。 这就是它在我的标题中的样子: /w
我想克隆带标题的问号。一切正常,但是当我将鼠标悬停在新问号上时,第一个问号上会出现工具提示。有什么想法吗? 我正在使用 jQuery 和醉酒的工具提示。 Demo here click here
好吧,我已经在一个 friend 的网站上工作了一段时间了。我的编码技能......值得怀疑,而且我遇到了很多问题。 目前我网站上的 jQuery 停止工作了,我找不到原因,并且我已尽一切努力让它工作
我想使用一个文件来保存所有#define 和常量:示例 #ifndef CONSTANTS_H_ #define CONSTANTS_H_ #include //OVERALL DEFS
我在我的表单中的所有 HTML 下都有一些验证码,这似乎阻止了我的复选框验证码的工作,一旦我在我的 HTML 下的代码周围添加/* */(使其不活动),我就得出了这个结论) 复选框验证代码开始正常工作
我是新手。我的页面上有两个 javascript/jquery。如果我使用第一个脚本,第二个脚本将不起作用。如果我删除第一个脚本,第二个脚本就可以正常工作。我不知道如何解决这个问题。我知道有一个“无冲
我是 Bison 新手,在处理 Shift/Reduce 冲突时遇到了麻烦... 我正在为C语言编写语法规则:ID是标识变量的标记,我编写此规则是为了确保即使将标识符写在括号中,也可以考虑它。 id
我目前正在使用 LibGdx 开发我的第一个 Android 游戏项目。这是一款 2D 迷宫游戏,您可以使用触摸输入从其中一个入口到其中一个导出“画出”一条线。世界本身是一个 TiledMap,目前仅
我正在尝试通过 javascript 完成表单验证,并在 #form# 标记中放置一个要执行的 .py 文件操作。但问题是,当我提交数据后,它不会重定向到 .py 操作。所以我摆脱了 preventd
我是一名优秀的程序员,十分优秀!