How do I create a cycling function that cycles between adding and removing classes?

Question

This currently works:

$(document).ready(function() {
    $('body').addClass('red').delay(50).queue(function(next){
      $(this).removeClass('red').delay(50).queue(function(next2){
        $(this).addClass('blue');
        next2();
      });
      next();
    });

But I'd like something more efficient. And plus, the code above becomes a headache when I start adding and removing more classes...

Answer 1

Take a look at jQuery's .toggleClass()-function.

EDIT: Try this:

var interval = setInterval(function() {
    $('body').toggleClass('red');
    if (/* some condition */) {
        clearInterval(interval); // abort
    }
}, 50);

Answer 2

use plain old setTimeOut() to setup intervals at every 50ms for as long as you want...

for(i=0;i<100;i++)setTimeout(blinkFunction, i*50);}