您现在的位置:首页 --> JavaScript --> 解决jQuery动画在chrome下暴走的问题
解决jQuery动画在chrome下暴走的问题
浏览:2993次 出处信息
最近发现用jQuery实现的动画在chrome下会有暴走的问题。例如下面这个页面,打开后红色方块每隔三秒向右移动20像素。此时开一个新的Tab,把这个页面放在后台Tab上等待30秒,然后切换回该页面,就会看到红方块连续向右移动了200像素。
<!doctype html> <html> <head> <script language="javascript" src="jquery-1.6.1.min.js"></script> <style> #box { position: absolute; background: #f00; width: 20px; height: 20px; top: 100px; left: 20px; } </style> <script> $(document).ready(function() { var left = 1; var move = function() { left++; $("#box").animate({ left: 20 * left }, 200); setTimeout(move, 3000); }; setTimeout(move, 3000); }); </script> </head> <body> <div id="box"></div> </body> </html>
该现象在Chrome 12上可以复现,而Firefox 3.6和IE8上无此问题。可能是Chrome为了提高性能,后台Tab不会执行动画效果,而切换回Tab的瞬间,积压的动画效果一下子执行,导致动画暴走。
解决方法就是在执行animate之前先stop()一下:
$("#box").stop().animate({ left: 20 * left }, 200);
这样,虽然切换Tab的瞬间还是能看到一些残像,但比之前要好多了。
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46470)
- 分享一个JQUERY颜色选择插件 (阅读:12398)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9611)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7685)
- jQuery的data()方法 (阅读:7445)
- jQuery性能优化指南 (阅读:7165)
- jQuery Color Animations颜色动画插件 (阅读:6933)
- 精于图片处理的10款jQuery插件 (阅读:6068)
- jQuery中getJSON跨域原理详解 (阅读:5553)
- 配合jquery实现异步加载页面元素 (阅读:5299)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:Google+中URL的渐进增强 >>
文章信息
- 作者:charlee 来源: idv2
- 标签: jQuery 动画 暴走
- 发布时间:2011-07-15 00:13:53
建议继续学习
近3天十大热文
- [138] Go Reflect 性能
- [18] 公钥私钥加密解密数字证书数字签名详解
- [17] 基于HTTP缓存轻松实现客户端应用的离线支持
- [16] osx平台上lol英雄联盟launcher启
- [14] 我的git笔记
- [14] Joomla反序列化漏洞的查漏补缺
- [13] 在JavaScript中什么时候使用==是正
- [12] Linux内存中的Cache真的能被回收么?
- [12] SSL多域名绑定证书的解决方案
- [11] 相似度计算之马氏距离