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);

});

我想按以下顺序设置点的颜色：

白色，白色，白色（初始状态）
蓝色，白色，白色
蓝色，红色，白色
蓝色，红色，绿色
白色，红色，绿色
蓝色，白色，绿色
蓝色，红色，白色
......并回到初始状态。

我在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/

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 demo

通过使用step变量，您可以更快或更慢。

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

jQuery颜色样式交替

2 个答案: