Jquery 动画在Firefox中工作，但不在Chrome和IE中工作

我有一个基本的动画我正在努力工作

在Firefox中，一切正常，但在Chrome或Internet Explorer中，动画对象的位置会在第一个动画命令后跳到屏幕底部

有人能看出我做错了什么吗

更新 现在，我已经创建了一个新版本的动画，其中在

---

在.block3设置动画之前，一切正常，它应该向右移动10像素，然后再向上移动15像素。相反，它会做一些奇怪的摆动。有人有什么想法吗？

您正在尝试设置CSS底部属性的动画，如果一开始没有明确设置，可能会出错。尝试设置顶部属性的动画，然后反转方向：

---

您正在尝试设置CSS底部属性的动画，如果一开始没有显式设置，可能会出错。尝试设置顶部属性的动画，然后反转方向：

---

你有一个绝对定位的div，没有底部设置。Chrome&IE在这种情况下工作正常-您的第二个动画将底部添加10，这将底部设置为0，因为它未设置，并将其动画设置为10。底部为10而没有顶部的绝对定位div将显示距离容器底部10像素的值

---

你想让元素向上移动吗？如果是这样的话，我会说改用top。但是您也会遇到同样的问题，因为您也没有top属性集。我会去掉元素上的左边距和右边距，改为使用top/left/etc。

你有一个绝对定位的div，没有底部设置。Chrome&IE在这种情况下工作正常-您的第二个动画将底部添加10，这将底部设置为0，因为它未设置，并将其动画设置为10。底部为10而没有顶部的绝对定位div将显示距离容器底部10像素的值

---

你想让元素向上移动吗？如果是这样的话，我会说改用top。但是您也会遇到同样的问题，因为您也没有top属性集。我会去掉元素上的左边距和右边距，改为使用top/left/etc。

请格式化JS，使其可读。@maxedison:顶部有一个TidyUp按钮供您使用：-@maxedison如果您单击“整理”按钮，它将清理格式-这并不是说我们不应该整理自己的代码，而是如果您想看到更好的格式，它将为您处理。我已更新了指向新的“整理”版本的链接：请将您的JS格式化为可读。@maxedison:顶部有一个“整理”按钮供您使用：-@maxedison如果您单击“整理”按钮，它将清理格式-并不是说我们不应该整理自己的代码，而是如果您希望看到更好的格式，它将为您处理。我已更新了指向新的“整理”版本的链接：这似乎可以正常工作，我已经在更新了代码，但现在的问题是动画开始得太远了，请忽略我！我盯着这个看了很久了。将绝对位置更改为相对位置，现在一切正常。谢谢你的帮助。现在我改变了一些事情，我遇到了另一个问题，我相信这与我们讨论的有关。有什么想法吗？请看。我添加了position：相对于容器div，并将您的marginleft和margintop值分别更改为left和top。我认为它正在做你想做的，如果不是这样，请告诉我。嗨，Elliot，我现在面临这个问题-右侧的子弹正确地淡入，但在另一个动画完成后，它向上移动了一些，似乎工作正常，我已经在更新了代码，但现在的问题是动画开始得太远了，请忽略我！我盯着这个看了很久了。将绝对位置更改为相对位置，现在一切正常。谢谢你的帮助。现在我改变了一些事情，我遇到了另一个问题，我相信这与我们讨论的有关。有什么想法吗？请看。我添加了position：相对于容器div，并将您的marginleft和margintop值分别更改为left和top。我认为它正在做你想做的，如果不是这样，请告诉我。嗨，埃利奥特，我现在面临着这个问题-右侧的子弹正确地淡入，但在另一个动画完成后，它以某种方式向上移动

$.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();