您现在的位置:首页 --> JavaScript --> 解决jQuery动画在chrome下暴走的问题
解决jQuery动画在chrome下暴走的问题
浏览:2989次 出处信息
最近发现用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表格呈现 (阅读:46467)
- 分享一个JQUERY颜色选择插件 (阅读:12391)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9605)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7678)
- jQuery的data()方法 (阅读:7442)
- jQuery性能优化指南 (阅读:7154)
- jQuery Color Animations颜色动画插件 (阅读:6930)
- 精于图片处理的10款jQuery插件 (阅读:6060)
- jQuery中getJSON跨域原理详解 (阅读:5548)
- 配合jquery实现异步加载页面元素 (阅读:5290)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:Google+中URL的渐进增强 >>
文章信息
- 作者:charlee 来源: idv2
- 标签: jQuery 动画 暴走
- 发布时间:2011-07-15 00:13:53
建议继续学习
近3天十大热文
- [269] Go Reflect 性能
- [16] [译]Google Chrome中的高性能网
- [11] 关于Linux的文件系统cache
- [11] Mac下.apk的反编译
- [10] 在FreeNAS/BSD搭建基于Nginx+
- [10] webapp网页调试工具Chrome Dev
- [10] PHP上传文件类型彻底判断方案及PHP+ng
- [10] Linux常用系统信息查看命令
- [10] 最近总结的一些技巧(vim,python,s
- [9] 精于图片处理的10款jQuery插件