jQuery とCSSを組み合わせた動きが作動しない。

Question

自身の就活に活かすためのポートフォリオサイトを作っています。
一応は完成したのですが、動きが少ないのでは？と言われたため、スクロールすると要素が下からふわっと出てくる動きをつけようと思いました。
動くWEBデザインアイディア帳というサイトの「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」（https://coco-factory.jp/ugokuweb/jscss/）を参考にhtml,CSS,JSを書いてみましたが動作してくれません。

以下該当と思われる箇所抜粋です。

    <section id="works" class="box fadeInUpTrigger">
      
      <h2>WORKS</h2>
      <div class="under-box"></div>
      <ul class="works-wrap gallery-list">
        <li>
          <a href="img/works-1.PNG" class="gallery" data-group="gallery"><img src="img/works-1.PNG" alt=""
              width="100"></a>
          <h3><a href="https://intp.site/429/decoly">decoly</a></h3>
          <p>Design / Coding (Responsive)</p>
        </li>
        <li>
          <a href="img/works-2.PNG" class="gallery" data-group="gallery"><img src="img/works-2.PNG" alt=""
              width="100"></a>
          <h3><a href="https://intp.site/429/portfolio/">文芸作品集</a></h3>
          <p>Design / Coding (Responsive)</p>
        </li>
        <li>
          <a href="img/works-3.PNG" class="gallery" data-group="gallery"><img src="img/works-3.PNG" alt=""
              width="100"></a>
          <h3><a href="https://intp.site/429/misoshiru/">おみおつけ</a></h3>
          <p>Design / Coding (一部Responsive)</p>
        </li>
        <li>
          <a href="img/works-4.PNG" class="gallery" data-group="gallery"><img src="img/works-4.PNG" alt=""
              width="100"></a>
          <h3><a href="https://intp.site/429/zoological/">Zoo Logical</a></h3>
          <p>Coding (一部Responsive)</p>
        </li>
        <li>
          <a href="img/works-5.PNG" class="gallery" data-group="gallery"><img src="img/works-5.PNG" alt=""
              width="100"></a>
          <h3><a href="https://intp.site/429/hotelimperial/">Hotel Imperial Resoat Tokyo</a></h3>
          <p>Coding (一部Responsive)</p>
        </li>
        <li>
          <a href="img/works-6.PNG" class="gallery" data-group="gallery"><img src="img/works-6.PNG" alt=""
              width="100"></a>
          <h3><a href="https://intp.site/429/donguri/">どんぐりスウィーツ</a></h3>
          <p>Coding</p>
        </li>
      </ul>
    </section>

/* ふわっとスクロール */
.fadeUpTrigger{
  opacity: 0;
  }

  .fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
/* ふわっとスクロールここまで */

// WORKS部分モーダル

//3. 画像のモーダル
$(".gallery").modaal({
	type: 'image',
	overlay_close:true,//モーダル背景クリック時に閉じるか
	before_open:function(){// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');/*縦スクロールバーを出さない*/
	},
	after_close:function(){// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');/*縦スクロールバーを出す*/
	}
});

// WORKS部分モーダル　ここまで

// TOPリンクここから
//スクロールした際の動きを関数でまとめる
function PageTopAnime() {
	var scroll = $(window).scrollTop();
	if (scroll >= 200){//上から200pxスクロールしたら
		$('#page-top').removeClass('DownMove');//#page-topについているDownMoveというクラス名を除く
		$('#page-top').addClass('UpMove');//#page-topについているUpMoveというクラス名を付与
	}else{
		if($('#page-top').hasClass('UpMove')){//すでに#page-topにUpMoveというクラス名がついていたら
			$('#page-top').removeClass('UpMove');//UpMoveというクラス名を除き
			$('#page-top').addClass('DownMove');//DownMoveというクラス名を#page-topに付与
		}
	}
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
	PageTopAnime();/* スクロールした際の動きの関数を呼ぶ*/
});

// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
	PageTopAnime();/* スクロールした際の動きの関数を呼ぶ*/
});

// #page-topをクリックした際の設定
$('#page-top a').click(function () {
    $('body,html').animate({
        scrollTop: 0//ページトップまでスクロール
    }, 500);//ページトップスクロールの速さ。数字が大きいほど遅くなる
    return false;//リンク自体の無効化
});

// TOPリンクここまで


// 動きのきっかけとなるアニメーションの名前を定義
function fadeAnime(){

	//ふわっと動くきっかけのクラス名と動きのクラス名の設定
	$('.fadeInUpTrigger').each(function(){ //fadeInUpTriggerというクラス名が
	　　var elemPos = $(this).offset().top-50; //要素より、50px上の
	　　var scroll = $(window).scrollTop();
	　　var windowHeight = $(window).height();
	　　if (scroll >= elemPos - windowHeight){
	　　$(this).addClass('fadeIn');
	　　// 画面内に入ったらfadeInというクラス名を追記
	　　}else{
	　　　$(this).removeClass('fadeIn');
	　　// 画面外に出たらfadeInというクラス名を外す
	　　}
	　　});
	
	//関数でまとめることでこの後に違う動きを追加することが出来ます
	$('.fadeInDownTrigger').each(function(){ //fadeInDownTriggerというクラス名が
	　　var elemPos = $(this).offset().top-50; //要素より、50px上の
	　　var scroll = $(window).scrollTop();
	　　var windowHeight = $(window).height();
	　　if (scroll >= elemPos - windowHeight){
	　　$(this).addClass('fadeDown');
	　　// 画面内に入ったらfadeDownというクラス名を追記
	　　}else{
	　　　$(this).removeClass('fadeDown');
	　　// 画面外に出たらfadeDownというクラス名を外す
	　　}
	　　});
	
	
	}//ここまでふわっと動くきっかけのクラス名と動きのクラス名の設定
	
	// 画面をスクロールをしたら動かしたい場合の記述
		$(window).scroll(function (){
			fadeAnime();/* アニメーション用の関数を呼ぶ*/
		});// ここまで画面をスクロールをしたら動かしたい場合の記述
	
	// 画面が読み込まれたらすぐに動かしたい場合の記述
		$(window).on('load', function(){
			fadeAnime();/* アニメーション用の関数を呼ぶ*/
		});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

原因お分かりになる方いらっしゃいましたらご回答よろしくお願いいたします。
文字数の都合上抜粋となってしまいましたが、書かれていない部分で何か原因箇所に心当たりがありそうな場合はご連絡コメントいただければ対応させていただきます。

Comments

[yukapome789]

こんにちは。動かない、とのことですがコンソールにエラーは出ていませんか？ GoogleChrome を使っているなら F12 で DevTools が開けてそこで確認できますよ。書いていただいてるソースを全部読むのは大変なので、エラーが出てるならそれを書いた方が（出てないならその旨を書いた方が）回答つきやすいと思います。

[kirenja]

ご指摘ありがとうございます。
検証ツールを確認したところ、エラーは出ておりませんでした。

[yambejp]

就活にjQueryはむしろ不利だと思いますが・・・

[kirenja]

jsとPHPはまだ勉強中なので綺麗に実装できないんです。
不利だと思う理由を教えていただけますか？

Answer 1

typoです。

.fadeUp {→.fadeIn {

または、

                    $(this).addClass('fadeIn');
                    // fadeIn → fadeUp
                } else {
                    $(this).removeClass('fadeIn');
                    // fadeIn → fadeUp