1

ブラウザの左側から右側に移動したい単純な雲の画像があります。フェードアウト中に画面の右側の外側に消えてから、フェードインしてアニメーションを最初からやり直します。左。これが私がこれまでに持っているコードです:

var animate = function(targetElement, speed){

    $('#cloudsAnimated').css({left:'-200px'});
    $('#cloudsAnimated').animate(
        {
        'left': "100%",
        opacity:0
        },
        {
        duration: speed,
        easing:"linear",
        complete: function(){
            animate(this, speed);
            }
        }
    );

};
animate($('#cloudsAnimated'), 5000);

この機能は、画像が画面の右側に近づくにつれてフェードアウトしますが、完全に消えて再び表示されることはありません (機能の「完了」キーを再起動するように設定しました)。不透明度を変更しないと、再び開始されるため、不透明度と関係があります。繰り返しますが、画像がフェードインして、左から右に再び移動し始めるようにしたいと思います。

解決策をご存知の方教えてください！ありがとう。

4

2 に答える 2

0

不透明度をリセットしません。

変更してみる

$('#cloudsAnimated').css({left:'-200px'});

に

$('#cloudsAnimated').css({left:'-200px', opacity:1});

これはフェードインしませんが、少なくとも表示されるはずです。
また、ソリューションで初めてフェードインすることもありませんね。

于 2012-12-11T09:14:59.107 に答える
0 
$("#cloudsAnimated").css({left: '-200px').fadeIn();

#cloudsAnimatedハードコーディングの代わりに -200の幅を使用することもできます

.animate同じキューでフェードインするように再度使用することもできます。

$("#cloudsAnimated").css({left: '-200px');
$("#cloudsAnimated").animate({'left': 0, 'opacity': 1}, 500);

speed500 は単なる推測です。実際のアニメーション時間が必要な場合は、ウィンドウ幅に対する 200 の比率で割った値になるでしょう。

于 2012-12-11T09:17:21.127 に答える