0

jquery を使用してムービーを作成しました。映画の各シーンを表す複数の関数で構成されています。一部のシーンは、他のシーンよりも長く実行する必要があります。ムービー全体のループを作成するのに問題があります。setInterval をいくつかの方法で設定しようとしましたが、すべて失敗しているようです。事態を複雑にするために (少なくとも私にとっては)、これは理想的には完了時に「次へ」ボタンをトリガーするスライド ショー内にあります。

私が使用した戦略を自由にノックしてください。各シーンの setTimeout は、次の関数が十分に長く実行された後に各関数を実行する方法を理解できる唯一の方法でした。前の関数が完了した後に次の関数を呼び出すという現在の戦略に対して、シーンを実行する必要がある時間で各関数を呼び出す方法を理解できませんでした。

方向性をありがとう

合計時間を計算し、値を指定して setTimeout で atrAnime() を呼び出すには JavaScript が必要だと思いますが、計算して戻すことができないようです。

ここに私が持っているものがあります:

$(document).ready(function(){

    atrAnime(2000);

});
function atrAnime(dur){
    first();
    setTimeout(second, dur);
    setTimeout(third, dur += 2000);
    setTimeout(forth, dur += 2000);
    setTimeout(fifth, dur += 2000);
    setTimeout(sixth, dur += 6000);
    setTimeout(seventh, dur += 2000);
    setTimeout(eighth, dur += 2000);
    setTimeout(ninth, dur += 2000);
    setTimeout(tenth, dur += 2000);
    setTimeout(end, dur += 3000);

};

いくつかのシーンの例:

function first(dur){

    $('.pcba')
        .css({
            left: '150px'
            })
        .show();
    $('.pcb_cad')
        .css({
            left: '275px',
            top: '50px'
            })
        .show();
}
function second(dur){
        $('.pcba').fadeOut();
        $('.arrows')
        .css({
            left: '275px',
            top: '50px'
            })
        .fadeIn();
        $('.heatGenComps')
            .css({
                left: '325px',
                top: '20px'
                })
        .fadeIn();

}

編集 私の新しいゲットーソリューションには、 atrAnime() 呼び出しの最後の関数が次のように含まれています。

setTimeout(caller, dur += 2000);

};

そして別の機能

function caller(){
    atrAnime(2000);
}
4

2 に答える 2

1

アクションが完了すると、実際にコールバック メソッドを提供するいくつかの関数をアニメーションで使用しています。たとえば、fadeIn/fadeOut関数には、要素が完全に表示/非表示になったときの「onComplete」コールバックがあります -

$("#elem").fadeOut(function(){
  alert('element has faded out!');
});

これらのコールバック関数を利用して、実行シーケンスを管理する 1 つの中央関数をすべて呼び出すことができます。各コールバックは、次のシーケンスをトリガーします。show()とfadeIn()関数の両方が、ドキュメントで詳しく説明されているように、このコールバックを提供します。

于 2012-11-03T22:12:16.377 に答える
0

コールバックですべてのアニメーションをネストした方がよいのではないでしょうか? setTimeout に頼るのは気分が悪いだけです:)。つまり、関連するアニメーションのコールバックを使用して、アニメーションの次の段階は前の段階が終了した後にのみ起動するということです。次のようなもの：

$("firstElement").slideDown(500, function () { 
    $("secondElement").slideDown(500, function () { 
        $("thirdElement").slideDown(500, function () { 
            //etc
        });         
    });  
});
于 2012-11-03T22:15:38.697 に答える