1

私はかなり長い間探していました、そして誰もが私にsetTimeout（）関数を打つ前に、私に聞いてください。

見えないHTML要素が20個まであります。一時停止して、一度に1つずつ表示されるようにします。また、jQueriesのすばらしいアニメーション機能のいくつかを、それらを表示するときに使用したいと思います。

したがって、基本的には、JavaScript/jQueryを使用して「一連のフレーム/イベント/状態を再生」したいと思います。

私は何を調べましたか？

SetTimeout（）：

私はJSのsetTimeout関数を見てきましたが、私が知る限り、1〜3個のsetTimeout（）関数があるとうまく機能します。

もっと欲しければ、それは非常に厄介になり始めます。それらは埋め込まれており、数字を足し合わせてすべての時間を計る必要があり、全体像を把握するのは非常に困難です。

jQuery.delay（）

また、jQuery.delay（）関数には、実際にコードを一時停止する機能がありません。アニメートしたい要素ではなく、20以上の要素があります。

Updatepanelスパム

私が今考えているもう1つのオプション（私を殺してください）は、updatepanelを使用することです。毎秒、タイマーを使用してポストバックを作成し、セッションを使用して、それがどの「フレーム」であるかを正確に認識します。次に、フレーム番号に応じて表示/非表示を設定したり、jQueryアニメーションを起動したりできます。

さて、今朝目が覚めたとき、このような更新パネルでWebサーバーにスパムを送信することは夢にも思いませんでした。

これを行うための良い方法はありますか？私は提案を非常に受け入れています。

どうもありがとう！:-)

4

3 に答える 3

8

すべての要素に同じクラスを適用する場合（sequential_expose私の例では）、それらの要素を選択して、選択を呼び出すことができますeach()。要素のフェードインをずらすには、提供元のアイテムのインデックスをeach()乗算し、fadeIn間の遅延に必要な時間を乗算して、その値をパラメーターとしてに渡すことができますdelay()。500ミリ秒の間隔が与えられた場合（これは好きなように作成できます）、選択の最初の項目は0遅延、2番目500、3番目1000などになります。次に、呼び出し後に好みのアニメーション（fadeIn(200)私の例では）をチェーンします。 delay()。

$(function () {
    $('.sequential_expose').each(function(i) {
        $(this).delay(i*500).fadeIn(200);
    });
});

この例では、これがドキュメントの準備完了関数として示されていることに注意してください。必要に応じて、これを明らかに変更できます。

于 2013-01-11T20:33:43.750 に答える
3

これは私がこれにどのように使用するかですsetTimeout：

// Assume your target elements are all divs 
var elements = $('div');

function showOne() {
    // Fade-in the first element
    elements.first().fadeIn(200);

    // Remove first element from our jQuery object
    elements.splice(0,1);

    // If there are further elements, start a new timer
    if(elements.length) {
        setTimeout(showOne, 500);
    }
}

// Start first timeout
setTimeout(showOne, 500);

http://jsfiddle.net/uRwFK/

于 2013-01-11T20:27:20.383 に答える
0

jQuery animate（）には、アニメーションを連鎖させることができる完全なコールバックが含まれています。

20個のDOM要素の配列があるとしましょう。ここに大まかなスニペットがあります。

var elArray=[el1,el2,...el20];

function animateFunction(i) {
    $(elArray[i]).animate(
       ...
       // on complete move to the next element
       complete: function(){if (i<elArray.length-1) animateFunction(i+1);}
    });
}

animateFunction(0);
于 2013-01-11T21:02:10.493 に答える