Question

我有一个在Firefox中运行良好的简单动画，现在我在所有其他主流浏览器中进行了测试，不幸的是，它表现得非常奇怪。

.truck元素应该在从左向右移动时缓慢淡入，最后再淡出。

在除FF之外的所有浏览器上，它保持正确并向后移动一点..

也许您已经知道问题可能是什么。

HTML：

<div class="panel panel-default">
<div class="panel-body">              
        <div class="animation"></div>
        <div class="truck"></div>
</div>
</div>

css：

.panel-body {
    position: relative;
}
.animation {
    background: green;
    width: 788px;
    height: 145px;
    margin: 0 auto;
}
.truck {
    background: black;
    width: 60px;
    height: 34px;
    position: absolute;
    margin-top: -34px;
}

jQuery的：

$(document).ready(function(){
    var truck = $('.truck');
    truck.css("opacity", "0");
    truck.animate({
        right: 15
    }, {
        queue: false,
        duration: 5000
    })
    .animate({
        opacity: 1
    }, 1000)
    .delay(3000)
    .animate({
        opacity: 0
    }, 1000);

});

谢谢！

Answer 1

而不是做

truck.animate({
            right: 15
        }, {
            queue: false,
            duration: 5000
        })

将其更改为left 将适用于所有浏览器

truck.animate({
            left: 500
        }, {
            queue: false,
            duration: 5000
        })

fiddle

进行检查

Answer 2

您在功能上更改了“右侧”，但未设置此属性的第一个值。例如，我设置了“right:100%”，它的工作正常。

http://jsfiddle.net/zJt3T/

奇怪的jquery动画行为在不同的浏览器中

2 个答案: