解决jQuery动画在chrome下暴走的问题 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> 解决jQuery动画在chrome下暴走的问题

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

浏览:3138次出处信息

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

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：javascript事件：获取事件对象getEvent函数

后一篇：Google+中URL的渐进增强 >>

文章信息

作者：charlee 来源： idv2
标签： jQuery 动画暴走
发布时间：2011-07-15 00:13:53

建议继续学习

近3天十大热文