3つの要素を順番に下から上へフェードインする動作を、スクロールで要素が表示領域に入るたび繰り返したい。

Question

前提

3つの要素を順番に下から上へフェードインする動作を
スクロールで要素が表示領域に入るたび繰り返したい。

実現したいこと

jQuery、css、htmlで、スクロールすると順番に下から上へフェードインするアニメーションを作っていますが、
スクロールで要素が画面内に入るたびに、繰り返す機能を作りたいです。

該当のソースコード

<div class="recruit_button">
        <div class="button fadein">エンジニア<span class="font_test3">→</span></div>
        <div class="button fadein">営業<span class="font_test3">→</span></div>
        <div class="button fadein">PR・広報<span class="font_test3">→</span></div>
</div>

.fadein {
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition: all 1s;
}

.is-fadein {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transform: translateX(0);
}

    $(".fadein").each(function () {
          const targetPosition = $(this).offset().top;
          const windowHeight = $(window).height();
          const scroll = $(window).scrollTop();

          if (scroll > targetPosition - windowHeight + 100) {
            $(function () {
              $('.fadein').each(function (i) {
                $(this).delay(i * 200).queue(function () {
                  $(this).addClass("is-fadein");
                });
              });
            });

          }

          if (scroll > targetPosition + $(this).height() || scroll < targetPosition - windowHeight) {
            $(function () {
              $('.fadein').each(function (i) {
                $(this).delay(i * 200).queue(function () {
                  $(this).removeClass("is-fadein");
                });
              });
            });
          }
        });

試したこと

$(this).removeClass("is-fadein");で繰り返し表示されるかと思ったのですが
一度しか反応しませんでした、
ご指摘お願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

読み込み時1回のみしか実行していないので、読み込み時に画面内に入っていれば永遠に表示されて、画面外ならば永遠に表示されません。

読み込み時とスクロール時のイベントで、画面内か画面外か判断して処理する必要があります。

また、３つの要素をeachでループしてますが、無駄が多く複雑なコードになってます。
時間差は、CSSの方で transition-delay で遅延させればループする必要はないです。

is-fadeinクラスの付加/削除も親要素にすればいいでしょう。

.fadein {
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition: all 1s;
}
.fadein:nth-child(2) {
	transition-delay: 200ms;
}
.fadein:nth-child(3) {
	transition-delay: 400ms;
}
.is-fadein .fadein {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transform: translateX(0);
}

const target =  $(".recruit_button")
$(window).on("load scroll", function () {
  const targetPosition = target.offset().top;
  const windowHeight = $(window).height();
  const scroll = $(window).scrollTop();

  if (scroll > targetPosition - windowHeight + 100) {
    target.addClass("is-fadein");
  }
  if (
    scroll > targetPosition + target.height() ||
    scroll < targetPosition - windowHeight
  ) {
    target.removeClass("is-fadein");
  }
});