Trying to delay a for loop until a div is loaded
<p>I'm playing around with loading and moving around div elements on a page. I'm trying to fade in a string and then reverse it. The reverse loop needs to wait until after the initial fade in loop completes. Here is what I have so far but it doesn't execute the reverse loop. I assume because it can't see the initial divs yet.</p>

<pre><code>var string_to_reverse = "Reverse",
i;

for (i = 0; i &lt; string_to_reverse.length; i++) {
    $("&lt;div&gt;" + string_to_reverse[i] + "&lt;/div&gt;").hide()
        .appendTo("body").delay(500 * i).fadeIn(1000);
}

$("body div:last").load(function () {
    for (i = 1; i &lt;= $("body div").length; i++) {
        $("body div:eq(" + i + ")").detach().prependTo($("body"));
    }
});
</code></pre>

<p><a href="http://jsfiddle.net/vk45U/" rel="nofollow">http://jsfiddle.net/vk45U/</a></p>
