jQuery color style alternating

Question

I'm trying to achieve a jQuery effect like: http://jsfiddle.net/Qcghe/1/

$(document).ready(function() {  
    setInterval(function() {
        $('small:nth-of-type(1)')
            .animate( { color: '#F7B903' }, 750)
            .animate( { color: '#FFF' }, 1000); 
    }, 1000);

    setInterval(function() {
        $('small:nth-of-type(2)')
            .animate( { color: '#5BB6FD' }, 750)
            .animate( { color: '#FFF' }, 1000); 
    }, 2000);

    setInterval(function() {
        $('small:nth-of-type(3)')
            .animate( { color: '#D13360' }, 750)
            .animate( { color: '#FFF' }, 1000); 
    }, 3000);

});

I want to animate the colour of the dots in the following order:

1. white, white, white (initial state)
2. blue, white, white
3. blue, red, white
4. blue, red, green
5. white, red, green
6. blue, white, green
7. blue, red, white
8. …and back to the initial state.

I made an animated GIF in Photoshop to help illustrate (black and white are inverted):

gif animation http://cdn.vpsunder10.com/1.gif

Answer 1

check the code

$(document).ready(function() {  
  setInterval(function() {
    $('small:nth-of-type(1)')
    .animate( { color: '#F7B903' }, 1000)
    .delay(4000)
    .animate( { color: '#FFF' }, 1000); 

     $('small:nth-of-type(2)')
    .delay(1000)
    .animate( { color: '#5BB6FD' }, 1000)
    .delay(5000)
    .animate( { color: '#FFF' }, 1000); 

      $('small:nth-of-type(3)')
    .delay(2000)
    .animate( { color: '#D13360' }, 1000)
    .delay(6000)
    .animate( { color: '#FFF' }, 1000); 

    }, 10000);
 });

http://jsfiddle.net/Qcghe/3/