一段时间后，动画开始移动到位置之外

Question

我正在尝试创建一种幻灯片动画。我在这里有代码：jsFiddle。

这些平板电脑会旋转。

问题在于，在随机时间，动画会移动。错误的平板电脑会出现错误的动画。以下是截图：

这就是动画出错时的样子

主要问题是我不明白为什么动画会随机出错。在我的电脑中，它可以正常运行数小时，但在其他情况下（特别是在Safari上）。

Answer 1

您可以存储每个动画el的预期最终css值，然后在动画回调中设置这些值，因此对于每个动画类似

var el = $(selector);

el.data("finalCSS", { your expected final CSS values })

$("selector").animate({animation properties}, function() {
     el.css(el.data("finalCSS")).data("finalCSS", undefined);
})

这无助于弄清楚它为什么会发生（但我不能自己重新创建这个问题），但提供了一个确保布局不会中断的安全措施;

Answer 2

我相信当你在上一个动画结束之前尝试动画时会发生这种情况。在动画播放之前使用 jQuery stop() 。例如：

$('#animatingDiv').stop(false, true).animate({height:300}, 200, callback);

第一个参数（false）将清空该元素上的动画队列，第二个参数（true）将在开始新动画之前跳转到当前动画的结尾。

Answer 3

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

<强> 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);
  }
};​

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

Answer 4

您正在将CSS位置设置为十进制值。

    img_w = $("#tablet"+num+" img").width();
    img_w = img_w *140 / 600;
    img_h = $("#tablet"+num+" img").height();
    img_h = img_h *140 /600;
    ...
    var new_width = $(this).width() * 140 / 600;
    $(this).css('width', new_width);
    var new_height = $(this).height() * 140 / 600;
    $(this).css('height', new_height);

您的分区可能会导致十进制结果在不同浏览器中产生不同的效果。子像素CSS定位可能会造成意外错误。