Question

我有一个基本的动画，我想在http://jsfiddle.net/5YrF2/3/

工作

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

谁能看到我做错了什么？

更新我现在已经在http://jsfiddle.net/5YrF2/6/

创建了一个带有额外管道的动画的新版本

一切正常，直到.block3动画，它应该向右10像素，然后向上15像素。相反，它做了一些奇怪的摆动。任何想法？

Answer 1

您正在尝试为CSS“bottom”属性设置动画，这可能会在首次未明确设置时出错。尝试设置动画“顶部”属性并反转方向：

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

Answer 2

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

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

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

2 个答案: