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 动画 http://cdn.vpsunder10.com/1.gif

- calculataur

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/

- zzlalani

---

动画还可以，但是有一个以上的白弹头的状态是初始状态，只有1个白弹头。看一下我添加的gif，它的颜色是黑色而不是白色。 - calculataur

Answer 2

由于每个动画都遵循着类似但相关的循环，我建议将其表达为一系列步骤，而不是三个独立的步骤。

var $dots = $('#dots span'),
    colors = ['blue', 'red', 'green'], // Colour assigned to each dot, in order.
    step = 1000;                       // Duration of each animation step in ms.

function cycle() {
    $dots
        .finish() // Ensure no animations still running from last cycle.
        .each(function(index, dot) {
            var $dot = $(dot),
                color = colors[index];

            $dot
                .delay(index * step)
                .animate({ color: color }, step)
                .delay(step * 2)
                .animate({ color: 'white' }, step)
                .promise()
                .done(function() {
                    // All but last should be restored to dot colour.
                    if (index != 2) $dot.animate({ color: color }, step);
                })
            ;
        });

    // Set all the dots to white once animations have finished.
    $dots.promise().done(function() { $dots.animate({ color: 'white' }, step) });
}

// Start immediately, and thereafter every seven steps.
cycle();
setInterval(cycle, step * 7);

jsFiddle演示

通过调整step变量，您可以使其更快或更慢。

（如果您有兴趣并且不必支持旧浏览器，我还可以向您展示如何使用关键帧动画在纯CSS中完成此操作。）

- Jordan Gray

---

JavaScript 可以，但使用 CSS 实现会更好，可以得到更好的支持和更快的加载速度。 - calculataur