スクロールでdivごとにフェードイン＋ディレイさせたいが、全てのdivに反映されてしまう

Question

前提・実現したいこと

スクロールでフェードイン＋同じdiv(.js-scroll-box)内にあるものはディレイ

というものを、jqueryで実装したかったのですが、
可視領域に入っていないものを含めた全てにクラス付与されてしまい困っています。
「見えているjs-scroll-boxの中の、js-scroll-fadeにクラス付与」という形にすればいいと思うのですが、
どうすればいいでしょうか。

<div class="space"></div>
<div class="box js-scroll-box">
	<p class="js-scroll-fade">ダミーテキストダミーテキスト</p>
	<p class="js-scroll-fade fade-left">ダミーテキストダミーテキスト</p>
	<p class="js-scroll-fade fade-right">ダミーテキストダミーテキスト</p>
</div>
<div class="box js-scroll-box">
	<p class="js-scroll-fade">ダミーテキストダミーテキスト</p>
	<p class="js-scroll-fade fade-left">ダミーテキストダミーテキスト</p>
	<p class="js-scroll-fade fade-right">ダミーテキストダミーテキスト</p>
</div>

.space{
	height: 100vh;
}
.box{
	background: #ccc;
	margin-bottom: 600px;
}
.js-scroll-fade {
	position: relative;
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 1.2s ease-out;
}

.js-scroll-fade.fade-right {
	transform: translate(50px, 0px);
}
.js-scroll-fade.fade-left {
	transform: translate(-50px, 0px);
}
.js-scroll-fade.is-animation{
	opacity: 1;
	transform: translate(0, 0);
}

(function(){
    $(window).scroll(function (){
        $('.js-scroll-box').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 100){
				$('.js-scroll-fade').each(function(i){
					$(this).delay(600*i).queue(function() {
						$(this).addClass('is-animation').dequeue();
					});
				});
            }
        });
    });
});

失敗

.js-scroll-boxにクラスをつけて、そのクラスの中のjs-scroll-fadeにクラスを付与しては？と思い試しました。
可視領域に入ってからフェードされるようになったものの、2つ目のboxの開始が遅くなってしまいました(ディレイの関係でしょうか？)

$(function(){
    $(window).scroll(function (){
        $('.js-scroll-box').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight){
                $(this).addClass('js-scroll-box-on');
            }
            if (scroll > elemPos - windowHeight + 100){
				$('.js-scroll-box-on .js-scroll-fade').each(function(i){
					$(this).delay(600*i).queue(function() {
						$(this).addClass('is-animation').dequeue();
					});
				});
            }
        });
    });
});

最近使い始めたばかりなのでお見苦しいコードかと思います。すみません。
分かる方がいらっしゃいましたら、よろしくお願いいたします。

Answer 1

指定のスクロール値に来たかどうかの判断をしてる条件式の中が
$('.js-scroll-fade').each()
なっているのですべての「.js-scroll-fade」に対してクラスがついています。
以下のように書き換えてスクロール値に達した「.js-scroll-box」の中の「.js-scroll-fade」
という指定に変えてみてください。

if (scroll > elemPos - windowHeight + 100) {
  $(this).find('.js-scroll-fade').each(function (i) {
    $(this).delay(600 * i).queue(function () {
      $(this).addClass('is-animation').dequeue();
    });
  });
}

動くサンプルです

Comments

[juicy]

無事にイメージ通りの動きになりました！
(this).findは今後も使いどころが多そうに感じましたので、早期に知る事ができて良かったです。
サンプルまでつけてくださり、ありがとうございました。