0

私が持っているもの：

画面を横切って画面外に移動する平面の絶対位置の画像。

必要なもの:

アニメーションを 10 秒ごとにループ/再起動する必要があります。つまり、平面は各ループの開始時にデフォルトの絶対位置に表示されます。

問題：

多数の例を試しましたが、最も近いのは、.queue と .callee を使用してこの例を使用することです。ループしますが、画像を再配置するには逆のアニメーションが必要です。代わりに、アニメーション化せずに画像を再配置する必要があります。

私のコード:

アニメーションが開始する CSS (ループごとに再起動する必要がある)...

<style>
#main_content_container{
width:800px;
margin:0 auto;
position:relative;
height:2000px;
}

#sprite_plane{
    position:absolute;
    left:-400px;
    top:400px;
    opacity:0;
    filter:alpha(opacity=0); /* For IE8 and earlier */
    }
</style>

jQueryアニメーション...

<script>

  $("#sprite_plane").animate({
    opacity: 1,
    "left": "+=430px",
    "top": "-=530px",
  }, 1500 );

</script>

HTML...

<div id="main_content_container">
    <img src="images/plane.png" alt="" width="120" height="120" id="sprite_plane" />
</div>
4

1 に答える 1

2

この再帰関数はあなたが望むことをするはずだと私は信じています

function loopAnimation(doReset) {
    var $el = $("#sprite_plane");
    if (doReset) {
       $el.css({ left: "-=430px", top: "+=530px", opacity:0 });/*assume opacity is zero at start*/
    }
    $el.animate({
        opacity: 1,
        "left": "+=430px",
        "top": "-=530px",
    }, 1500, function() {

        setTimeout(function() {
            loopAnimation(true);
        }, 10000);
    });
}

ページ初期化コードの呼び出し：

 loopAnimation(false);

その後、アニメーションの各インスタンスの完全なコールバックは、内の関数を呼び出しますsetTimeout

于 2012-10-30T18:12:00.043 に答える