您现在的位置:首页 --> JavaScript --> 解决jQuery动画在chrome下暴走的问题
解决jQuery动画在chrome下暴走的问题
浏览:3146次 出处信息
最近发现用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表格呈现 (阅读:46524)
- 分享一个JQUERY颜色选择插件 (阅读:12655)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9688)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7758)
- jQuery的data()方法 (阅读:7588)
- jQuery性能优化指南 (阅读:7331)
- jQuery Color Animations颜色动画插件 (阅读:7091)
- 精于图片处理的10款jQuery插件 (阅读:6226)
- jQuery中getJSON跨域原理详解 (阅读:5621)
- 配合jquery实现异步加载页面元素 (阅读:5375)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:Google+中URL的渐进增强 >>
文章信息
- 作者:charlee 来源: idv2
- 标签: jQuery 动画 暴走
- 发布时间:2011-07-15 00:13:53
建议继续学习
近3天十大热文
- [51] Oracle MTS模式下 进程地址与会话信
- [49] 图书馆的世界纪录
- [49] IOS安全–浅谈关于IOS加固的几种方法
- [49] 如何拿下简短的域名
- [45] android 开发入门
- [44] 【社会化设计】自我(self)部分――欢迎区
- [42] 界面设计速成
- [42] 读书笔记-壹百度:百度十年千倍的29条法则
- [41] 视觉调整-设计师 vs. 逻辑
- [40] Go Reflect 性能