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

问题描述：

我想创建一种幻灯片动画。我的代码在这里：jsFiddle。动画在一段时间后开始移动位置

这些平板电脑会旋转。

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

When everything is fine

，这是它的外观时，动画出错像

when the animation goes wrong

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

你的jsfiddle有错误，从运行在所有停止它。 '未捕获的TypeError：不能调用null的方法'位置'。 '未捕获的ReferenceError：doit没有定义' – Jasper 2012-02-07 23:20:36

我不太熟悉jsFiddle。请访问www.nxgenlabs.co.uk查看实况样本。 – 2012-02-10 11:51:16

我不确定你的意思是'在我的电脑里它可以正常运行好几个小时，但在其他情况下......“还有什么其他情况？哪些浏览器行为不当？ – Jasper 2012-02-10 18:26:32

答

你可以存储每个动画EL，然后在动画回调设置这些值的预期最终的CSS值，所以对于每个动画EL像

var el = $(selector); 

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

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

这不，首先要弄清楚为什么它的帮助发生（但我不能自己重新创建问题），但提供故障安全以确保布局不会中断;

答

我相信这种情况发生在您尝试在之前的动画结束之前进行动画制作。动画前使用jQuery stop()。例如：

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

的第一个参数（假）将清空该元件和所述第二参数（真）上的动画队列将跳转到当前动画的末尾开始新的动画之前。

我试了一下，但离开动画过夜后，动画仍然出错。但在下一个动画之前停止动画是一个很好的建议。谢谢 – 2012-02-08 14:18:49

不幸的是，在jsFiddle上没有任何工作示例，但我相信您为动画所做的计算出现了错误的值，随着时间的推移这些值会变得很明显。或者，你正在计算一个破坏整个幻灯片的错误。我可能错了。如果没有看到有效的样本，不能帮上忙。 – Sandeep 2012-02-10 03:31:51

要观看动画，请访问www.nxgenlabs.co.uk。我已经通过使用ajax重新加载div来实现临时修复。我注意到，当我在其他页面上浏览或运行其他应用程序时，动画正在运行时，动画出现错误的几率较高。我想你是对的，因为时间流逝 – 2012-02-10 10:11:08

答

您正在将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定位可能会造成您的意外错误。

时，某个地方的动画出现了错误，但这仅适用于图像。这有可能会影响平板电脑的运动吗？ – 2012-02-22 11:07:03

答

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

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

2.使用普通函数来处理所有的过渡

1.商店平板电脑位置属性。如果你使用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); } };

这里的概念证明的jsfiddle

JQuery用户界面会为你做所有的工作：http://jsfiddle.net/nRHag/4/

经过Firefox，Safari，Chrome和IE8/9的测试。 – RSG 2012-02-16 21:43:06

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

相关推荐