How to effect "cascade" with Javascript / jQuery?

Question

Imagine I have a list of 20 blocks <li>, and that when the page loads, each of them should be shown within milliseconds of each other (this would be done with CSS3, so the code would only have to add a class to the elements), like a "cascade effect".

How could I pass this logic to Javascript / jQuery?

Here’s a FIDDLE with all the example, only missing the logic of the effect "cascade".

Answer 1

You can use it like this:

$('ul li').each(function (i, el) { // percorrer cada elemento
    setTimeout(function () {   
        $(el).addClass('on');  // adicionar a classe
    }, i * 200);               // usar o indice do .each() do jQuery para multiplicar por 200 milisegundos
});

Example

Answer 2

For a better and more concise solution, see the response of @Sergio.

I’d use a simple setInterval:

var indice = 0;
var interval = setInterval(function() {
    var proximo = $("li").eq(indice++);
    if ( proximo.length == 0 )
        clearInterval(interval);
    else
        proximo.addClass("on");
}, 500);

Example.