jQuery 可視範囲に入ってから処理を実行する（グラフが伸びる処理）

Question

Java Scriptの記述について、数時間悩みましたがうまくいきませんので、お知恵を貸してください。

横に伸びるグラフをサイトに追加したいと思っています。[こちら]（https://deshinon.com/2019/03/02/kopipe-web-bou-gragh/）の横棒グラフのコードにて問題なく動くのですが、「DOMを読み込んで○秒後」ではなく、グラフを囲む要素が可視範囲に入ったら処理を実行したく試行錯誤しておりますがうまくいきません。

<div class='wrapper'>
    <div class='bar'>
        <div class='bar-info japanese' data-total='80'>
            Japanese
            <span class='percent'>80</span>
        </div>
    </div>

    <div class='bar'>
        <div class='bar-info math' data-total='80'>
            Math
            <span class='percent'>80</span>
        </div>
    </div>

    <div class='bar'>
        <div class='bar-info science' data-total='60'>
            Science
            <span class='percent'>60</span>
        </div>
    </div>

    <div class='bar'>
        <div class='bar-info history' data-total='70'>
            History
            <span class='percent'>70</span>
        </div>
    </div>
</div>

<script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
<script src="js/app.js"></script> 

$(document).ready(function() {
    function skillSet() {
        $('.bar-info').each(function() {
            total = $(this).data("total");
            $(this).css("width", total + "%");
        });
        $('.percent').each(function() {
            var $this = $(this);
            $({
                Counter: 10
            }).animate({
                Counter: $this.text()
            }, {
                duration: 3000,
                easing: 'swing',
                step: function() {
                    $this.text(Math.ceil(this.Counter) + "%");
                }
            });
        });
    };
    $(window).scroll(function (){
        $(".wrapper").each(function(){
            var ePosition = $(this).offset().top;
            var scrolls = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scrolls > ePosition - windowHeight + windowHeight/5){
                skillSet();
            }
        });
    });
});    
      

希望する動き
・class="wrapper"が可視範囲に入ってからグラフが横に伸びる（widthの追加）
・10%からスタートし、class="percent"の数値まで数字が増えて表示される
例：グラフの幅10%＆10%と表示→1%ずつカウントが増えながらグラフが伸びる→70%の位置でグラフが止まり、70%と表示

現状
・グラフが横に伸びる処理はできている
・表示されるパーセンテージが10%のまま
例：グラフの幅10%＆10%と表示→10%と表示されたままグラフが伸びる→70%の位置でグラフが止まり、10%と表示

どなたか修正必要箇所をご指導ください。よろしくお願いします。

Answer 1

現在animateメソッドのdurationが3000になっていますが、これを0にしたらすぐ動くはずです。それを実現してから次のステップに進むといいのでは。

あと、counterの上限値が10になっているので、10％までしか進まないはずです。

Comments

[manaw]

コメントありががとうございます。Counterの値は初期の状態で10となっており、animate({ Counter: $this.text() }で<span class='percent'>80</span>の値を取得します。可視範囲に入ってから関数を実行するのではなく、ページロード時の実行ではグラフの幅もパーセンテージの表示も成功します。