Question

I’m trying to add a class to an li element once after button is clicked.
The goal is to add the class one at a time with a delay time in between. It seems to work fine with the fadeOut function but not with the addClass or related function.

Here is a Jsfiddle.net demo http://jsfiddle.net/4ANCj/3/

and part of the code

$("button").click(function() {
    $('li').each(function(index) {
        $(this).delay(900*index).addClass("hi");
    });
});

I know there is a similar question here on SO but it does not cut it.

Answer 1

addClass is not an animation function, so it is not added to the effect queue. You can use .queue ^[docs] instead (adds to the effect queue by default):

$(this).delay(900*index).queue(function(next) {
    $(this).addClass("hi");
    next();
});

Or use setTimeout ^[MDN] for a non-jQuery solution:

$("button").click(function() {
    var lis = $('li').get();

    function run() {
        var li;
        if(li = lis.shift()) {
            $(li).addClass('hi');
            setTimeout(run, 900);
        }
    }

    setTimeout(run, 900);
});