jQuery的.animate在Firefox的工作，但不是Chrome和IE

Question

我有我试图让在http://jsfiddle.net/5YrF2/3/

一切工作的基本动画作品如预期在Firefox，但在Chrome或Internet Explorer中的动画对象的位置在第一个动画命令之后跳转到屏幕底部。

任何人都可以看到我做错了什么？

直到.block3是动画UPDATE 我现在已经在http://jsfiddle.net/5YrF2/6/

一切创造了额外的管道动画的新版本工程确定了，它应该是向右走10个像素，然后高达15个像素。相反，它做了一些奇怪的摆动。任何任何想法？

Answer 1

你有一个绝对定位的div，无底集。 Chrome & IE在这种情况下工作正常 - 你的第二个动画增加了10个“底部”，它将底部设置为0（因为未设置）并将其设置为10.将“底部”设置为10的绝对位置的div，并且没有顶部，将从容器底部显示10个像素。

你想让元素向上移动吗？如果是这样，我会说使用顶部。 （但是你也会遇到同样的问题，因为你也没有设置顶级属性）。我会摆脱元素上的“margin-left”和“margin-top”，并使用top/left /等。代替。

Answer 2

您正在尝试为CSS“底部”属性设置动画效果，如果它没有明确设置，可能会出错。尝试动画“顶”属性，而不是和反向的方向：

http://jsfiddle.net/5YrF2/4/

$.Deferred(function(dfr) { 
    dfr.pipe(function() { 
     return $(".block1").delay(500).fadeIn().animate({ 
      left: '+=600' 
     }, 2500, "linear").animate({ 
      left: '+=10', 
      top: '-=10' 
     }, 100, "linear").animate({ 
      left: "+=27" 
     }, 100, "linear").animate({ 
      left: '+=10', 
      top: '+=10' 
     }, 100, "linear").animate({ 
      left: "+=25" 
     }, 100, "linear").fadeOut(); 
    }).pipe(function() { 
     return $(".block1").css('left', ''); 
    }).pipe(function() { 
     return $(".block1").delay(500).fadeIn(); 
    }) 
}).resolve();