Changing background color with setInterval

Changing background color with setInterval

Hi I'm trying to make a row of divs blink, but one div should blink at a
time.(not all the divs should blink at the same time [i could do that])..
kind of like the way a traffic light works. each light is part of a row of
lights and each light turns on and off one at a time going through a loop.
in my case the blinking is meant to remind the users that the divs or
clickable.
I put each box in an array but I couldn't figure out how to change the
color of each box in a loop. I guess a way to solve this is by adding and
removing a classes that contains the colors and it should do that after 1
or 2 seconds so setInterval should come in to play. I couldn't figure it
out.
but here is my sad code
var arr =[];
$(".boxes").each(function(){
arr.push($(this));
});
function bgChange(){
for(i = 0; i < arr.length; i++){
arr[i].addClass("red");
}
}
setInterval(bgChange, 2000);
});
I'm looking to forward to seeing the creative ways that you guys could
come up with to make this work.
JSFIDDLE Thank You in advanced