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](http://cdn.vpsunder10.com/1.gif)