Question

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

这怎么可能？可能是在较慢的计算机上，动画不同步？我同时设置了5个div的动画，我设置了一个内部（每8秒）动画重现，我也将动画速度设置为慢。
我用left += 200px而不是left = 450px来设置div的动画，因为在firefox中所有的div都会跳到屏幕的左侧，其中一些会跳转到他们离开了屏幕。

我认为这是因为我使用父容器div来包含移动的div并使用margin-left: auto; margin-right:auto来居中这个容器div，并且在设置动画div的left属性时，firefox会对它们进行处理在动画开头有left:0。我将容器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/

动画在一段时间后开始移动

1 个答案: