解决jQuery动画在chrome下暴走的问题
摘要：最近发现用jQuery实现的动画在chrome下会有暴走的问题。例如下面这个页面，打开后红色方块每隔三秒向右移动20像素。
最近发现用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></div> </body> </html>该现象在Chrome 12上可以复现，而Firefox 3.6和IE8上无此问题。可能是Chrome为了提高性能，后台Tab不会执行动画效果，而切换回Tab的瞬间，积压的动画效果一下子执行，导致动画暴走。
解决方法就是在执行animate之前先stop()一下：
$("#box").stop().animate({ left: 20 * left }, 200);这样，虽然切换Tab的瞬间还是能看到一些残像，但比之前要好多了。
觉得文章有用？立即： 和朋友一起 共学习 共进步！
建议继续学习：JQuery实现Excel表格呈现 (阅读：45737)
分享一个JQUERY颜色选择插件 (阅读：9657)
jQuery插件---轻量级的弹出窗口wBox. (阅读：9109)
10个强大的Ajax jQuery文件上传程序 (阅读：7105)
jQuery的data()方法 (阅读：6926)
