delaying code in jquery

Question

i'm trying to add and remove some classes in sequence, with a delay in between. i've got several list-items of which i'd like to sequencially change the background color, when another button is clicked (kind of like a flashing-effect).

$("#changeclasses").click(function () {
    $(".listitem1").addClass("yellow");
    $(".listitem1").removeClass("yellow");   
    $(".listitem2").addClass("yellow");
    $(".listitem2").removeClass("yellow");      
});

i tried the following but obviously it didn't work :/

$("#changeclasses").click(function () {
    $(".listitem1").addClass("yellow").delay(200);
    $(".listitem1").removeClass("yellow").delay(200);  
    $(".listitem2").addClass("yellow").delay(200);
    $(".listitem2").removeClass("yellow");        
});

any help would be great! thank you.

Answer 1

you should consider using setTimeout

$("#changeclasses").click(function () {
    $(".listitem1").addClass("yellow");
    setTimeout(function(){ $(".listitem1").removeClass("yellow"); }, 200);
    setTimeout(function(){ $(".listitem2").addClass("yellow") }, 400);
    setTimeout(function(){ $(".listitem2").removeClass("yellow") }, 600);      
});