jQuery 順番にフェードインさせる処理が2回目以降、順番通りにならない

Question

###前提・実現したいこと
jQueryを用いて「スクロールして画面内に対象の要素が入ったら順番にフェードインさせる」処理を書きました。

2回目以降も、綺麗に左から順番にフェードインするようにしたいです。

###発生している問題・エラーメッセージ
スクロールをして最初に対象の要素が画面内に入ったとき、期待通りに左から順番にフェードインします。
しかし、ある程度上までスクロールして戻り、再度下にスクロールしていくと今度は順番通りにフェードインせず、バラバラです。
１個目の要素がフェードインしなかったり、4個目より5個目の方が早くフェードインしたり。

###該当のソースコード

<div id="contents">
  <div id="box1">Box1</div>
  <ul id="list">
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
    <li>EEE</li>
  </ul>
  <div id="box2">Box2</div>
</div>

* {
  margin: 0;
  padding: 0;
}

#box1 {
  height: 1000px;
  background: #ccc;
}

#box2 {
  height: 500px;
  background: #ccc;
}

#list {
  list-style: none;
  overflow: hidden;
}

#list li {
  width: 20%;
  height: 100px;
  border: 1px solid #333;
  float: left;
  box-sizing: border-box;
}

.fadeUpOrder {
  position: relative;
  bottom: -100px;
  opacity: 0;
  transition: all .5s;
}

.fadeUpOrder.active {
  bottom: 0;
  opacity: 1;
}

$(function(){
  $('#list li').addClass('fadeUpOrder');
  var elem = $('.fadeUpOrder');
  
  $(window).on('scroll', function(){
    var scr = $(window).scrollTop();
    var winHeight = $(window).height();
    elem.each(function(i){
      if(scr + winHeight > $(this).offset().top + 100){
        $(this).delay(i * 100).queue(function(){
          $(this).addClass('active').dequeue();
        });
      }else{
        $(this).removeClass('active');
      }
    });
  });
});

状況が再現できるコード
https://jsfiddle.net/5Lnnpnhq/1/

###試したこと
開発者ツールで対象の要素のクラスの付与状態がどうなっているか監視しました。
スクロールして戻った際、画面外にも関わらずactiveクラスがついている場合があります。
.queue()を使っているせいだと思うのですが、どのように対処したらいいかがわかりません。

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery 3.2.1

Answer 1

改善してみました。

• スクロールの判定をli要素ではなく#list要素で行う
• queueによる待機ではなく、transition-delayを使う
• 各要素それぞれにdelayが設定されているので、一斉にaddClassでactiveを追加しても大丈夫
• スクロールをガクガク素早くやっても必ず引っ込んだ状態からスタートするように、ひっこむ際は一瞬で消えるようにdelayとdurationを0にする

$(function() {
  $('#list li').addClass('fadeUpOrder');
  $(window).on('scroll', function() {
    var scr = $(window).scrollTop();
    var winHeight = $(window).height();
    if (scr + winHeight > $('#list').offset().top + 100) {
      $('#list li').each(function(i) {
        $(this).css('transition-delay', (i * 100) + 'ms');
        $(this).css('transition-duration', '.5s');
      }).addClass('active');
    } else {
      $('#list li').each(function(i) {
        $(this).css('transition-delay', '0ms');
        $(this).css('transition-duration', '0s');
      }).removeClass('active');
    }
  });
});

https://jsfiddle.net/5Lnnpnhq/3/

Comments

[lista]

頂いたコードで期待通りの動作をするようになりました！
解説も、書いて頂いたコードもとても分かりやすくて助かりました。ありがとうございました！

Answer 2

スクロール時のタイミングの問題で、

1. activeをセットするタイマーが入る
2. 上にスクロールする
3. イベントでactiveが外れる
4. 1でのタイマーが発動して、activeが付く

というような動きになってしまっています。3で.clearQueue()を入れてみれば、取りあえず動くようになります（修正したJSFiddle）。

なお、scrollイベントは頻繁に起こるので、そのたびごとにDOM操作をするのは少し負荷が大きいです。タイマーなどで動作するタイミングを絞ったほうがいいかもしれません。

Comments

[lista]

なるほど、そのような原因でうまく動作していなかったのですね。
scrollイベントでの発火も対策を考えてみます。ありがとうございました！

Answer 3

変数scrをログってみました。

900  _display:90:7
897  _display:90:7
887  _display:90:7
871  _display:90:7
863  _display:90:7
854  _display:90:7
836  _display:90:7
823  _display:90:7
808  _display:90:7
791  _display:90:7
784  _display:90:7
771  _display:90:7
757  _display:90:7
753  _display:90:7
751  _display:90:7

かなり細かくイベントが発生しているので、removeClassメソッドでクラスを除去した後に、過去のイベントで発生していたキューのコールバックが呼ばれaddClassメソッドが実行されている、ということはありそうです。
そうなった場合、$(this).offset().topの値が100ずれるわけですから、次にスライドインしてくるタイミングもその分ずれるでしょう。

もし、そうだとすると、delayメソッドの待ち時間の少ない手前の要素は比較的影響を受けにくいと予想されますので、あるところまでスクロールした時に「１個目の要素がフェードインしなかったり、4個目より5個目の方が早くフェードインしたり」することが起き得るかと思います。

Comments

[Lhankor_Mhy]

終わってたのかー