Question

my html:

<div class="showOnReady">*content*</div>

my jquery:

$(document).ready(function () {

        $(".showOnReady").delay(3000).each(function () {
            $(this).slideToggle("slow");        
        });
});

The trouble is they all happen at the same time. The delay works fine, they don’t appear until 3 seconds after the page has loaded but I want them to slideToggle one after the other.

Answer 1

You can use their index to increase the delay between each animation, for instance:

$(document).ready(function () {
        $(".showOnReady").delay(3000).each(function (i) {
            var del = i*500;
            $(this).delay(del).slideToggle(500);        
        });
});​

Demo