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

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

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

小提琴

支票

Answer 2

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

http://jsfiddle.net/zJt3T/