Need to loop through two loops and use delayed iterations in the inner loop
<p>What I'm trying to do is build a way to loop through two <code>for</code> loops, but the inner loop needs to have a delay on each iteration, but it can't be a queued animation. </p>

<p>The way I'd like for this to work is, on start it would trigger each of the elements at an interval but not wait for their animations to finish. Then it goes to the next row of items (first loop iterating) and starts that row before all items are faded out in the previous row.</p>

<pre><code>    var colLeng = Layout.columns,
        elemLeng,
        columnElements;

    // get number of columns
    for (var i = 0; i &lt; colLeng; i++) {
        columnElements = $('.prvwImg[data-col="' + i + '"]');
        elemLeng = columnElements.length;

        for (var t = 0; t &lt; elemLeng; t++) {
            columnElements.eq(t).delay(500 * t).fadeOut(400);
            //columnElements.eq(t).delay(500 * t).stop().fadeOut(400);
        }
    }
</code></pre>

<p>Edit: With this code it loops through fine, but the delay doesn't actually work so they fade out all at the same time.</p>
