jQueryでスクロールして表示されたら、数字をカウントアップさせるアニメーションをしたいです！

Question

◎実現したいこと

スクロールをして、数字が表示領域に入ったときに、0から数字がカウントアップされ、180の数字で数字のカウントアップが止まるアニメーションをしたいと思っています。

◎出来ない部分

$(window).scroll(function () {
    

    $(function () {
        var countElm = $('.count'),
            countSpeed = 5;

        countElm.each(function () {
            var self = $(this),
                countMax = self.attr('data-num'),
                thisCount = self.text(),
                countTimer;

            function timer() {
                countTimer = setInterval(function () {
                    var countNext = thisCount++;
                    self.text(countNext);

                    if (countNext == countMax) {
                        clearInterval(countTimer);
                    }
                }, countSpeed);
            }
            timer();
        });

    });

});

「$(window).scroll(function () 」でスクロールしたら、カウントアップが始める部分までは実装できました。

しかし少しスクロールすると、文字が画面に表示されなくてもカウントアップのアニメーションが開始されます。

https://teratail.com/questions/157023

→こちらの記事を参考に、コードを書き換えましたが、どうしてもできませんでした。

個人的には、高さを取得していないからかなと推測しております。

お忙しいと思われますが、教えて頂けると嬉しいです。

◎コード

HTML

<p class="count" data-num="180">0</p><span>名</span>

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



img {
	max-width: 100%;
}

.count {
	margin-top: 1000px;
}

jQuery

$(window).scroll(function () {

    $(function () {
        var countElm = $('.count'),
            countSpeed = 5;

        countElm.each(function () {
            var self = $(this),
                countMax = self.attr('data-num'),
                thisCount = self.text(),
                countTimer;

            function timer() {
                countTimer = setInterval(function () {
                    var countNext = thisCount++;
                    self.text(countNext);

                    if (countNext == countMax) {
                        clearInterval(countTimer);
                    }
                }, countSpeed);
            }
            timer();
        });

    });

});

◎その他

MacBookproを使っています。

Comments

[m.ts10806]

念の為、動作確認しているブラウザとjQueryのバージョンをご提示ください

[yujiyuji]

こちらです！

動作確認ブラウザ
→GoogleChrome

jQueryのバージョン
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<script src="js/main.js"></script>

[yambejp]

なにかの課題ですかね。同じような内容があがっているのでこっちに回答してあります
https://teratail.com/questions/309492

[yujiyuji]

ご丁寧にありがとうございます！

0からカウントを初め、180の数字でカウントが止まる実装にする場合は、どのようなコードを書けばよろしいでしょうか？？

↑すみません質問が少し抜けていました。

[m.ts10806]

質問は編集できます

[yujiyuji]

了解しました。

Answer 1

昨日同じ内容で質問をしていて、先程解決しましたので私の解決した方法を載せておきます。
良ければこちらの方法でも試してみてはいかがでしょうか？

htmlとJavascriptをコピペすれば動くようになっております。
htmlの100となっている部分を180に変更すれば、実現したい内容に近づけると思います。

https://teratail.com/questions/309492#reply-433287

Comments

[yujiyuji]

ありがとうございました！無事解決できました！とてもわかりやすかったです。

[momon-zzz]

良かったです！