0

私は 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;
}

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

});

ありがとうございました！

4

2 に答える 2

1

するのではなく

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

に変更するとleft 、すべてのブラウザで機能します

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

フィドル

小切手を与える

于 2013-10-31T14:18:08.027 に答える
1

関数の「権利」を変更しますが、このプロパティの最初の値を設定しません。たとえば、「right:100%」を設定すると、正常に動作します。

http://jsfiddle.net/zJt3T/

于 2013-10-31T14:18:48.497 に答える