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

Strange jquery animate behavior in different browsers

本文关键字：动画 浏览器 jquery      更新时间：2023-09-26

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

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

在除FF以外的所有浏览器上，它都保持正确并向后移动。

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

js小提琴

.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;
}

j查询：

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

谢谢！

而不是做 

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

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

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

小提琴

给支票

更改函数的"right"，但不设置此属性的第一个值。例如，我设置了" right:100% "，它工作正常。

http://jsfiddle.net/zJt3T/

相关文章：