2

ページの読み込み時に単純なアニメーションを偽造したいのですが、いくつかの png を順番に表示します。遅延メソッドを提供する最新バージョンの jQuery (執筆時点で 1.4.2) を使用します。私の最初の（脳死した）衝動は：

$('#image1').show('fast').delay(800);
$('#image2').show('fast').delay(1200);
$('#image3').show('fast');

もちろん全員同時に登場。jQuery doc の例では、複数のアイテムを処理するのではなく、チェーンされている単一のアイテムを参照しています。OK... show() からのネストされたコールバックを使用して再試行してください:

$('#image1').show('fast', function() {
    $('#image2').show('fast', function() {      
        $('#image3').show('fast', function() {      
        });
    });
});

見栄えは悪いですが (10 を実行することを想像してみてください。また、プロセッサ ヒットはどのようなものになるのだろうか) が、シーケンシャルに動作します! 遅滞なく。だから...そこからコールバック関数を使用してshow（）の後にdelay（）をチェーンします（サポートしているかどうかさえわかりません）：

$('#image1').show('fast').delay(800, function() {
    $('#image2').show('fast').delay(1200, function() {      
        $('#image3').show('fast');
    });
});

うーん。私が考えていたのとは逆の結果: コールバックは機能しますが、それでも遅延はありません。それで...ネストされたコールバックの代わりに、キューと遅延の組み合わせを使用する必要がありますか? キューの jQuery doc の例でも、たとえば 1 つの要素のみを使用しています。これにはカスタム キューの使用が含まれると推測されますが、これを実装する方法は不明です。それとも、簡単な方法がありませんか？（簡単な問題の場合！）

4

5 に答える 5

3

それらが一緒にある場合は、単純化できます。

function showNext(img) {
  //show, find next image, repeat, when next doesn't find anything, it'll stop
  img.show('fast', function() { showNext($(this).next('[id^=image]')); });
}
//Call the first image to start the chain
showNext($("#image1"));

それらがさらに離れている場合は、その.next()セレクターを調整して次の画像を見つける方法を調整するか、それらすべてにクラスを割り当てることができます...ただし、次の画像にトラバースすることはできます。

于 2010-03-02T14:13:28.377 に答える
2

ここでワイルドな推測ですが、どうですか

$('#image1').show('fast', function() {
    $('#image2').delay(800).show('fast', function() {      
        $('#image3').delay(1200).show('fast', function() {      
        });
    });
});
于 2010-03-02T14:06:50.860 に答える
0

キューの使用は非常に簡単です。

var imgs = ['#image1','#image2','#image3',...];

function showNext() {
  var img = imgs.shift();
  if (img) $(img).show('fast', showNext);  
}

showNext(); // start
于 2010-04-30T03:52:11.343 に答える
0

これを jQuery で直接行うトレンディな方法はおそらくあると思いますが、単純な配列と単純なタイムアウト メカニズムを使用して実行したくなるでしょう。

var toShow = ["image1", "image2", "image3", ... ], index = 0;
setTimeout(function() {
  $('#' + toShow[index++]).show('fast');
  if (index >= toShow.length) return;
  setTimeout(arguments.callee, 1000);
}, 1000);

「遅延」値が常に同じであると想定されていない場合は、「遅延」値も配列に入れることができます。

var toShow = [ {img: "image1", delay: 800}, {img: "image2", delay: 1200}, ... ],
  index = 0;
setTimeout(function() {
  $('#' + toShow[index].img).show('fast');
  if (index >= toShow.length) return;
  setTimeout(arguments.callee, toShow[index].delay);
}, toShow[0].delay);

編集これは楽しいです:-)必要に応じて、画像配列をjQueryオブジェクトとして構築できます。つまり、画像をHTMLにドロップしてから、jQueryセレクターでそれらを「見つける」ことができます。遅延値に関しては、遅延を画像ごとのものにしたい場合は、jQuery「メタデータ」プラグインを使用するか、何も必要ない場合はより単純なハックを使用して、画像クラス名にそれをコーディングできます。他のものについて詳しく説明します：

var toShow = $('img.showMeSlowly'), index = 0, getDelay = function(img) {
  var delay = 1000;
  $(img).attr('class').replace(/.*\bdelay:(\d+)\b.*/, function(_, ds) {
    delay = parseInt(ds, 10);
  });
  return delay;
};

setTimeout(function() {
  toShow.eq(index++).show('fast');
  if (index >= toShow.length) return;
  setTimeout(arguments.callee, getDelay(toShow.get(index)));
}, getDelay(toShow.get(0)));
于 2010-03-02T14:09:22.543 に答える
0

ここで与えられた奇妙な答えに少し驚いています。質問は少し古いですが、他の人がまだこれを検索して見つけると思うので、行きましょう：

まず、delay() はコールバック関数を受け入れません。アクションを遅らせたい場合は、アクションの前のドット表記チェーンにdelay() を配置する必要があります。

$('#image1').delay(800).show('fast');

これは 0.8 秒間待機してから、画像をすばやく表示します (期間「高速」 = 0.2 秒)。

次に、同時に実行したいアクションが複数ある場合は、単純に次のように記述します。

$('#image1').show('fast');
$('#image2').show('fast');

このようにして、それらはすべて同時に開始されるため、上記のコードは #image1 と #image2 のフェードイン アニメーションを並行して再生します。

異なる遅延で複数のアニメーションを開始する場合は、両方の戦略を組み合わせて、次のようにします。

$('#image1').show('slow');
$('#image2').delay(1000).show('slow');
$('#image3').delay(1600).show('slow');
$('#image4').delay(2000).show('slow');

遅延と期間に応じて、これにより、それぞれの間にギャップがあるアニメーションを再生できます (2 は 1 が終了した後に遅延して開始します)、連続して (期間「遅い」は 600 ミリ秒であるため、2 がちょうど終了したときに 3 が開始します)。 ) 遅延しますが、オーバーラップがあります (3 がまだ実行中に 4 が開始されます)。あなたがしなければならないのは、遅延と期間を調整することだけです。これは実際にあなたの質問に対する答えであり、あなたが望むことを行うための最も用途の広い方法です.

コールバック関数について: これは、show()、animate() およびその他のいくつかのメソッドで使用できます (ただし、試したように遅延では使用できません!)。主に、アニメーションが終了した後に、より複雑なことを行いたい場合に必要です。終了した。ただし、注意してください: セレクターが複数の要素に一致する場合、たとえば$('#image1, #image2')、コールバックは複数 (!) 回呼び出されます。セット内の各要素に対して 1 回です。これは非常に予期しない結果につながる可能性があります (簡単なヒント: それを回避するには、jQuery の when()/then() メソッドに関する情報を探してください)。

最後に、完全を期すために、同じ要素で複数のアニメーションを実行したいだけの場合- アニメーションを次々に実行し、その間に遅延が生じる可能性があります - 簡単に実行できます...

$('#image1').show('fast').hide('slow').delay(500).show('slow').hide('fast');

これにより、画像がすばやく表示され、ゆっくりと非表示になり、0.5 秒待ってからゆっくり表示され、すぐに非表示になります。

于 2013-10-25T20:58:22.497 に答える