jqueryを使ってフェードインを作りたいです。

html
1<div id="section5">
2      <div class="inner">
3        <h1 class="section5-ttl"><span class="blue">具体的な案件例</span></h1>
4        <p class="sec5-ttl">具体的にお見せします、お仕事実例集</p>
5        <div class="boxes">
6          <div class="box01">
7            <img src="https://writer-station.com/img/front/sitepng/case_icon01.png?1578457100" alt="">
8            <a class="box01-ttl" href="https://cosmenist.com/">コスメニスト</a>
9            <p class="box01-des">コスメファンの本音が「見える」化粧品メディアで<br>す。</p>
10            <p class="fee" date-num="100000"><span class="right-blue" id="odo01">30,000 <span class="yen">円</span></span></p>
11            <p class="content-des">記事コンテンツのライティング…1ページ1,000円<br>（800文字程度）×30ページ</p>
12          </div><!--box01-->
13          <div class="box02">
14            <img src="https://writer-station.com/img/front/sitepng/case_icon02.png?1578457100" alt="">
15            <a class="box02-ttl" href="https://cosmenist.com/">サプリ</a>
16            <p class="box02-des">健康やアンチエイジングに必要なサプリメントの情<br>報が見つかるサイトです。</p>
17            <p class="fee"><span class="right-blue">80,000 <span class="yen">円</span></span></p>
18            <p class="content-des">専門的な記事コンテンツのライティング＆システム<br>への流し込み＆簡単な装飾（html）…1ページ<br>2,000円（1200文字程度）×40ページ</p>
19          </div><!--box02-->
20          <div class="box03">
21            <img src="https://writer-station.com/img/front/sitepng/case_icon03.png?1578457100" alt="">
22            <a class="box03-ttl" href="https://cosmenist.com/">美侍（ビザムライ）</a>
23            <p class="box03-des">ニッポン男児の「男」を磨き、モテる男を創るため<br>のハウツーメディアです。</p>
24            <p class="fee"><span class="right-blue">30,000 <span class="yen">円</span></span></p>
25            <p class="content-des">記事コンテンツのライティング…1ページ1,000円<br>（800文字程度）×30</p>
26          </div><!--box03-->
27          <div class="box04">
28            <img src="https://writer-station.com/img/front/sitepng/case_icon04.png?1578457100" alt="">
29            <a class="box04-ttl" href="https://cosmenist.com/">美プロ</a>
30            <p class="box04-des">エステティシャン、美容師、アロマセラピスト、ネ<br>イリスト、アイリスト等の求人・転職情報が満載！<br>の美容専門求人サイトです。</p>
31            <p class="fee"><span class="right-blue">30,000 <span class="yen">円</span></span></p>
32            <p class="content-des">記事コンテンツのライティング…1ページ1,000円<br>（800文字程度）×30ページ</p>
33          </div><!--box04-->
34          <div class="box05">
35            <img src="https://writer-station.com/img/front/sitepng/case_icon07.png?1578457100" alt="">
36            <a class="box05-ttl" href="https://cosmenist.com/">まちコンポータル</a>
37            <p class="box05-des">全国で開催される街コン、パーティー、イベント情<br>報を多数掲載した国内初の街こん公式ポータルサイ<br>トです。</p>
38            <p class="fee"><span class="right-blue">80,000 <span class="yen">円</span></span></p>
39            <p class="content-des">イベント詳細の入力＆システムへの流し込み…1ペ<br>ージ500円（500文字程度）×60ページ</p>
40          </div><!--box05-->
41          <div class="box06">
42            <img src="https://writer-station.com/img/front/sitepng/case_icon06.png?1578457100" alt="">
43            <a class="box06-ttl" href="https://cosmenist.com/">健康美容EXPO</a>
44            <p class="box06-des">健康食品・化粧品などの商材、製造、試験、原料が<br>探せる総合情報サイトです。</p>
45            <p class="fee"><span class="right-blue">30,000 <span class="yen">円</span></span></p>
46            <p class="content-des">商品詳細の入力＆システムへの流し込み…1ページ<br>500円（500文字程度）×60ページ</p>
47          </div><!--box06-->
48        </div><!--boxes-->
49      </div>
50    </div><!--section6-->

css
1#section5 {
2  position :relative;
3  padding: 6% 0 3% 0;
4}
5.section5-ttl {
6  text-align: center;
7}
8.sec5-ttl {
9  font-weight: 900;
10  font-size: 1.1rem;
11  text-align: center;
12}
13.boxes {
14  display: flex;
15  flex-wrap: wrap;
16  position: relative;
17  justify-content: center;
18  transform:translateX(-50px);
19  opacity: 0;
20  transition: 1s;
21  transform: 0.5s;
22}
23.fadein {
24  opacity:1;　/* 表示させる */
25  transform:translateX(0);
26}
27.boxes img {
28  width: 31%;
29  height: 31%;
30  margin: 0;
31  padding:0;
32}
33.box01, .box02, .box03, .box04, .box05, .box06  {
34  position: relative;
35  text-align: center;
36  margin: 1.5%;
37}
38.box01-ttl, .box02-ttl, .box03-ttl, .box04-ttl, .box05-ttl, .box06-ttl  {
39  display: block;
40  color: black;
41  font-weight: 900;
42}
43.box01-des, .box02-des, .box03-des, .box04-des, .box05-des, .box06-des {
44  font-size: 0.85rem;
45}
46.content-des {
47  font-size: 0.85rem;
48}
49.fee {
50  font-size: 2.1rem;
51  font-weight: 700;
52  margin: 0;
53  padding: 0;
54}
55.right-blue {
56  color: #418BC9;
57}

js
1<script>
2var window_h = $(window).height();
3
4$(window).on("scroll", function() {
5    var scroll_top = $(window).scrollTop();
6    var countSpeed = 10;
7
8    $('.boxes').each(function() {
9        var elem_pos = $(this).offset().top;
10
11    if (scroll_top >= elem_pos - window_h + 600) {
12        $(this).addClass('fadein');　
13
14            // countクラスが付与されているオブジェクトをループ
15            $('.count').each(function(){
16                var self = $(this),
17                // data-num属性から最大値を取得
18                countMax = self.attr('data-num'),
19                // カンマを除去して数値に変換して取得
20                thisCount = parseInt(self.text().replace(/,/, '')),
21                countTimer;
22
23                function timer(){
24                    countTimer = setInterval(function(){
25                        // 数値を1加算
26                        var countNext = thisCount++;
27                        // 数値をカンマ文字列に変換してHTMLテキストに設定
28                        self.text(countNext.toLocaleString());
29
30                        if(countNext == countMax){
31                            clearInterval(countTimer);
32                        }
33                    },countSpeed);
34                }
35                timer();
36            });
37        }
38    });
39});        
40</script>

前提・実現したいこと

スクロールをして画面に写った時点で左から順にスライドで出てくるようにしたいのですが、上手くいきません。
どこが違うのでしょうか？
あと、それと同時にお金をルーレットみたいにしてからそれぞれの金額を表示したいのですが、どうすればいいですか？

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

模写をしているので、それと同じ見栄えにしたいです。
元サイトのurlは(https://writer-station.com/)です。
よろしくお願いいたします！！

行動規範の内容に同意します

回答1件

フェードインが動かない理由はJavascriptにあります。
まず>でエスケープの必要はありません。
またaddClassでクラス名を追加する時にセレクタの形式で指定するやり方にしているため
「.fadein」という名前のクラス名で追加されてしまっています。

javascript
1・・・
2if (scroll_top >= elem_pos - window_h + 600) {
3    $(this).addClass('fadein');　
4・・・

そして数値をルーレット風に増やすという処理ですが
jQueryで数字をカウントアップしながら表示する方法
こちらのサイトに紹介されているものを参考にして一つ目の項目のみに実装してみました。
他の部分は参考元のサイトも見て実装してみてください。

html
1・・・
2<div class="box01">
3・・・
4    <p class="fee"><span class="right-blue" id="odo01"><span class="count" data-num="100000">30,000</span><span class="yen">円</span></span></p>
5・・・
6</div><!--box01-->
7・・・

javascript
1<script>
2var window_h = $(window).height();
3
4$(window).on("scroll", function() {
5    var scroll_top = $(window).scrollTop();
6    var countSpeed = 10;
7
8    $('.boxes').each(function() {
9        var elem_pos = $(this).offset().top;
10
11    if (scroll_top >= elem_pos - window_h + 600) {
12        $(this).addClass('fadein');　
13    
14            // countクラスが付与されているオブジェクトをループ
15            $('.count').each(function(){
16                var self = $(this),
17                // data-num属性から最大値を取得
18                countMax = self.attr('data-num'),
19                // カンマを除去して数値に変換して取得
20                thisCount = parseInt(self.text().replace(/,/, '')),
21                countTimer;
22
23                function timer(){
24                    countTimer = setInterval(function(){
25                        // 数値を1加算
26                        var countNext = thisCount++;
27                        // 数値をカンマ文字列に変換してHTMLテキストに設定
28                        self.text(countNext.toLocaleString());
29
30                        if(countNext == countMax){
31                            clearInterval(countTimer);
32                        }
33                    },countSpeed);
34                }
35                timer();
36            });        
37        }
38    });
39});        
40</script>