解决jQuery动画在chrome下暴走的问题

最近发现用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的瞬间还是能看到一些残像，但比之前要好多了。

charlee.li