JavaScriptで時間差で要素を表示する

時間差表示がしたい

JavaScriptで画像などを一つずつ順番に表示したいとき、

今更ながら少しはまったのでメモ。

jQuert delay関数を使う

sleepとか単純に処理を止める関数はない模様なので、

jQueryの関数delayをループで組み合わせる

0.1秒ごとに画像を一つずつfadeIn表示する場合

$.each($('.img'), function(index) {

  $(this).delay(index * 100).fadeIn(100)

});

delayの遅延時間をループごとに増やしているわけですね。 

fadeInなど用意されているものではなく、任意の処理をdelayさせて呼びたい場合は

queue関数を使ってみる。

$.each($('.img'), function(index) {

  $(this).delay(index * 100).queue(function() {
    $(this).addClass('go');
  });

});

CSSのアニメーションを順番に発火させたいときには

こんな感じでいけそう。