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

Question

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

1. ，这怎么可能？可能是在速度较慢的电脑上，动画不同步吗？我同时动画5div，并设置一个内部(每8秒)动画递归，我还设置动画速度慢。

。

1. 我用类似于left += 200px的东西来动画div，而不是left = 450px，因为在火狐中，所有的div都会跳到屏幕的左边，其中一些会跳到屏幕的左边，以至于它们从屏幕上跳出来。

我认为这是因为我使用父容器div来包含移动div，并使用margin-left: auto; margin-right:auto对这个容器div进行中心设置，并且当设置动画div的left属性时，火狐在动画开始时将它们视为具有left:0。我将容器div的位置设置为相对位置，而动画div设置为绝对位置(因为我不希望它们干扰对方的位置)。有更好的方法吗？

Answer 1

您可以用更少的代码和更少的麻烦来完成这一任务。

1.将tablet位置属性存储在类中

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

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

如果您使用JQuery，switchClass用户界面将为您完成所有工作。

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/