奇怪的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
        })

將其更改為left將適用於所有瀏覽器

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

小提琴

給一張支票

Answer 2

您在功能上更改“正確”但未設置此屬性的第一個值。 例如，我設置“ right:100% ”，它的工作正常。

http://jsfiddle.net/zJt3T/