jQueryで順番にアニメーションさせたい（スクロール）

Question

お世話になっております。

理想

アニメーションの対象→div.sub-staffの小要素div.staff５つ
①スクロールして表示領域に達したら、上の要素から順番にfade inする（＝addClassする）
かつ、
②スクロールせずとも画面リロードなどで最初から表示領域に達していたら、上から順番にfade inする（=addClassする）

現状

スクロールでは順番にfade inされる。→①はできている。
最初から表示領域にいる場合には、fade inする要素が全て同時にfade inしてくる→②ができていない

知りたいところ

②が実現するための方法を知りたいです。
ご教授ください。

現状のコード

<div class="section sub-staff">
  <div class="staff fade_off"></div>
  <div class="staff fade_off"></div>
  <div class="staff fade_off"></div>
  <div class="staff fade_off"></div>
  <div class="staff fade_off"></div>
</div>

var staffs = $('#staff .sub-staff').children();
$(staffs).each(function(i) {
 var ptop = $(".sub-staff .staff").eq(i).offset().top;
 if(scroll > ptop - windowHeight + 100) {
   $(".sub-staff .staff").eq(i).addClass('fade_on').delay(250).queue(function() {
   $(this).dequeue();
   });
 }
});

fade_off {
 opacity: 0;
 -webkit-transition: all 2s;
 -moz-transition: all 2s;
 -o-transition: all 2s;
 -ms-transition: all 2s;
 transition: all 2s;
 transform: translateY(100px);
}

fade_on {
 opacity: 1;
 transform: translateY(0px);

Answer 1

アニメーションはCSSで行っているため、.addClass() とした瞬間に始まります。そのタイミングを遅らせなければいけません。

  var cnt = 0;
  $(staffs).each(function(i) {
    var ptop = $(".sub-staff .staff").eq(i).offset().top;
    if(scroll > ptop - windowHeight + 100) {
      $(".sub-staff .staff").eq(i).delay(250 * cnt++).queue(function() {
        $(this).addClass('fade_on').dequeue();
      });
    }
  });

Comments

[kotarofunyu]

ご教授いただいたコードを元に試行してみたところ、無事成功することができました！
そういった方法だったのですね...!　
ありがとうございました。