javascript - jQuery 颜色样式交替

Question

我正在尝试实现如下 jQuery 效果: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);

});

我想按以下顺序为点的颜色设置动画:

1. 白，白，白(初始状态)
2. 蓝、白、白
3. 蓝、红、白
4. 蓝、红、绿
5. 白色、红色、绿色
6. 蓝、白、绿
7. 蓝、红、白
8. …回到初始状态。

我在 Photoshop 中制作了一个动画 GIF 来帮助说明(黑白颠倒):

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

Answer 1

检查代码

$(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/