动画在一段时间后开始变化

Question

我正在设计一个带有 jQ​​uery animate 动画的 div 页面。这包括移动 div 和缩放它们（通过在 .animate() 参数中设置宽度和高度）。使用我的 MacBook，同时使用 chrome 和 firefox，我没有看到动画中的任何缺陷，但我被告知如果页面被单独放置 8-10 分钟，div 就会开始移位。

1. 这怎么可能？难道是在较慢的计算机上，动画不同步？我同时为 5 个 div 设置动画，并设置了一个间隔（每 8 秒）以使动画重复播放，并且我还将动画速度设置为慢。

2. 我正在使用类似left += 200px 而不是例如left = 450px 为 div 设置动画，因为在 Firefox 中，所有 div 都会跳到屏幕的左侧，其中一些会跳到最左边以至于它们跳出来屏幕。

   我认为这是因为我使用父容器 div 来包含移动的 div 并使用 margin-left: auto; margin-right:auto 来居中此容器 div 并且在设置动画 div 的 left 属性时，Firefox 将它们视为具有 @987654325 @在动画的开头。我将容器 div 的位置设置为相对位置，但将动画 div 设置为绝对位置（因为我不希望它们干扰彼此的位置）。有更好的方法吗？

Answer 1

您可以用更少的代码和更少的麻烦来做到这一点。

1.将您的平板电脑位置属性存储在类中

.tablet1{
  height:100px;
  width:140px;
  margin-left:-540px;
  top: 200px;
  z-index:10;
} 

2。使用通用函数来处理所有转换。

如果您使用switchClass，JQuery UI 将为您完成所有工作

switchTabletsRight = function(){
  var i, next, max = 5;
  for(i = 1; i <= max; i++){
    next = (i < max)? i + 1 : 1;
    $(".tablet" + i).switchClass("tablet" + i, "tablet" + next);
  }
};​

3。使用 setInterval 调用通用函数。

var loop = setInterval(function(){
  switchTabletsRight();
},2000);

这是 JSfiddle 的概念证明：http://jsfiddle.net/nRHag/6/