No delay in jQuery statement
<p>I want some characters to appear gradually, so i've built this script. However, the delay seems not to execute at all - i tried to put it to several thousands with no change in result. What do i miss?</p>

<pre><code>$(document).ready(function () {

    var 
        i,
        d = [500, 300, 600, 1000],
        t = "String";

    $("body")
        .delay(flashDuration[0])
        .animate({ backgroundColor: "#888888" }, d[1])
        .animate({ backgroundColor: "#222222" }, d[2])
        .animate({ backgroundColor: "#F8ECC2" }, d[3], null, function () {
            for (i = 0; i &lt; t.length; i++)
                $("&lt;span&gt;" + t.substr(i, 1) + "&lt;/span&gt;")
                    .addClass("hidden")
                    .delay(i * 2000) /* this delay doesn't execute */
                    .addClass("visible")
                    .appendTo("#floatingName");

        });
});
</code></pre>

<p>Please don't bite my head off for d being duration and t being title. I abbreviated the names because every programmer loves cryptic, non-self explanatory, short variable names. Right? Seriously, i tried to avoid wrapping.</p>

<p>Also, i tried to post in on jsFiddle <a href="http://jsfiddle.net/Chamster/8XUpL/1/" rel="nofollow">here</a> but the example doesn't even flash the screen, let alone executes the delay properly.</p>
