jquery - 反復的な jQuery アニメーションに delay() を配置する際の問題

Question

要素を上位 50 ピクセルから上位 150 ピクセルまで、次々と繰り返しアニメーション化する jQuery 関数を作成しました。

個々の要素のアニメーションの間に一時停止を作成しようとしています (反復間の一時停止ではありません)。最初の反復では、何も起こりません。次のものでは、関数は delay() を考慮していますが、要素の一部のみを考慮しています。

以下のリンクで全体の動作を確認できます。

コード全体

    $(".but").click(function() {
        function repeat() {
            var count = $(".box").length;
            $($(".box").get().reverse()).each(function(i) {
                $(this).delay(600 * i).animate({
                    top: "150px",
                    duration: 600,
                    easing: "linear",
                    complete: function() {
                        $(".box").each(function(i) {
                            $(this).delay(500);
                        });
                        if (count == 0) {
                            $(".box").css("top", "50px");
                            repeat();
                        };
                    }
                });
            });
        };
        repeat();
    });