Setting a delay whilst in a for loop Jquery/Javascript
<p>Getting a little confused here, not sure if its the monday morning blues! Its just not working :(</p>

<p>What I am trying to achive is:</p>

<p>Fade in each element with the interval set as the rel.</p>

<p>My code for the HTML is (these are all hidden with CSS)</p>

<pre><code>    &lt;div id="rpStage"&gt;
        &lt;div class="rpItem" rel="500"&gt;
            &lt;p&gt;0&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="rpItem" rel="4000"&gt;
            &lt;p&gt;1&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="rpItem" rel="6000"&gt;
            &lt;p&gt;2&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>And my javascript/jquery.</p>

<pre><code>function fadeInrpItem (rpItem, rpDelayTime) {
    rpItem.stop().animate({"opacity" : 1}, 400);
    setInterval(rpDelayTime);
};

function startTheRp () {
        for(var index=0; index &lt; $('.rpItem').length; index++) {

            var rpItem = $('.rpItem').eq(index);

            //Pull in our delay attribute from the div
            var rpDelayTime = rpItem.attr('rel');

            fadeInrpItem(rpItem, rpDelayTime);          
        }
};

$(document).ready(function(){
    startTheRp();
});
</code></pre>
