jquery - 順次 addClass ループ (jQuery)

Question

したがって、ページに5つのdivが連続しています。jQuery Waypointsを使用してクラスを最初のクラスに追加するとis-active、その外観が変わります。次に、次の遅延に追加するときに 1 秒などの遅延が発生し、その 1 秒後に次の遅延が発生するようにします。これが私のコードです：

<div class="five-step-waypoint"></div>
<div class="steps">
    <div class="step">Step 1</div>
    <div class="step">Step 2</div>
    <div class="step">Step 3</div>
    <div class="step">Step 4</div>
    <div class="step">Step 5</div>
</div>

そして私のjQuery：

$(document).ready(function() {
    $.fn.wait = function( ms, callback ) {
        return this.each(function() {
            window.setTimeout((function( self ) {
                return function() {
                    callback.call( self );
                }
            }( this )), ms );
        });
    };

    $('.five-step-waypoint').waypoint(function() {
        $(".step:first-child").addClass("is-active");
         $.each($(".step").wait(1000, function() {
             $(this).addClass("is-active");
         }));
    }, {
        triggerOnce: true
    });
});

注: hereから「待機」機能を取得しました。より良いことができる場合は、自由に変更するか、完全に削除してください。

私が抱えている問題は、最初のもの.stepが.is-active追加され、1 秒の遅延が観察されますが.is-active、他の 4.step秒に一度に追加されることです。.is-active1つずつ追加する必要があります。また、ループすることができれば（それぞれ.stepが を持っている場合.is-active、すべての をクリア.is-activeして最初に戻る）、それは素晴らしいことです!

誰かが私を助けてくれてありがとう！また、テスト用のjsfiddleも作成しました。簡単にするために、ウェイポイントのものは省略しました。