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

Question

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

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

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

也许您知道问题出在哪里。

jsFiddle

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
        })

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

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

fiddle

给个支票