Problems placing delay() in repetitive jQuery animation
<p>I've created a jQuery function that animates elements from top 50px to top 150px, one after the other, repetitively.</p>

<p>I am trying to create a pause between the animation of each individual element (not a pause between the iterations). At the first iteration, nothing happens. In the following ones, the function considers the delay(), but only to a part of the elements.</p>

<p>You can see the whole thing in action in the link below. </p>

<p><a href="http://jsfiddle.net/HdpPj/" rel="nofollow">THE ENTIRE CODE</a> </p>

<pre><code>    $(".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();
    });
</code></pre>
