逐个更改项目的颜色

Question

我编写了一个脚本，用于创建一组以小圆圈排列的小圆圈，它们通过循环逐个添加到DOM中。第一个循环完成后（所以我期望这是当i == 54）我想开始另一个循环，从列表中的第一个圆圈开始，逐个将圆圈的颜色从灰色变为红色。

这是我的代码：

var i = 1; 
 
var appendCircle = function loop() { 
 

 
    setTimeout(function() { 
 
    var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>"; 
 
    var $container = $(".circles-wrapper .circles"); 
 
    $container.append($circle); 
 
    i++; 
 

 
    if (i < 55) { 
 
     loop(); 
 
    } 
 
    }, 20); 
 

 
    // this is the problem because this change color of all small circles at once. 
 

 
    if (i == 54) { 
 
    setTimeout(function() { 
 

 
     $(".circle").each(function() { 
 
     $(this).css({ 
 
      "background": "blue" 
 
     }); 
 
     }) 
 
    }, 20); 
 
    } 
 
}; 
 

 
setTimeout(appendCircle, 100);

.circles-wrapper { 
 
    position: absolute; 
 
    top: 39%; 
 
    left: 51%; 
 
} 
 
.circles { 
 
    position: relative; 
 
    transform: rotateY(48deg); 
 
} 
 
.circle { 
 
    width: .2em; 
 
    height: .2em; 
 
    margin: -.2em; 
 
    border-radius: 50%; 
 
    background: #ceced0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circles-wrapper"> 
 
    <div class="circles"></div> 
 
</div>

Answer 1

你给每个圆圈类“圈子” +指数因此，所有你需要做的是循环遍历每个索引和更改背景每个元素的颜色。我所做的是使用了相同的循环函数，在达到55之后，我使用了它的mod 55并用它来选择圆。下面的代码和代码片段。

我也注意到一些圆圈重叠。如果您生成50个圆圈，则不会有任何重叠。我写了下面的代码来反映这一点。

var i = 1; 
 
var appendCircle = function loop() { 
 
    setTimeout(function() { 
 
    if (i < 51) { 
 
\t \t var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>"; 
 
\t \t var $container = $(".circles-wrapper .circles"); 
 
\t \t $container.append($circle); 
 
    } 
 
\t else{ 
 
\t \t var circleIndex = (i % 51)+1; 
 
\t \t $(".circle"+circleIndex).css("background-color", "blue"); 
 
\t } 
 
\t 
 
\t if(i<109){ 
 
\t \t loop(); 
 
\t } 
 
\t i++; 
 
    }, 20); 
 
}; 
 

 
setTimeout(appendCircle, 100);

.circles-wrapper { 
 
    position: absolute; 
 
    top: 39%; 
 
    left: 51%; 
 
} 
 
.circles { 
 
    position: relative; 
 
    transform: rotateY(48deg); 
 
} 
 
.circle { 
 
    width: .2em; 
 
    height: .2em; 
 
    margin: -.2em; 
 
    border-radius: 50%; 
 
    background: #ceced0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circles-wrapper"> 
 
    <div class="circles"></div> 
 
</div>

Answer 2

你第一遍后，你可能想找到创建的循环和修改这些。你给他们一类circle + i，所以你可以很容易地找到它们。检查代码片段。我刚刚添加了第三遍。

var i = 1, 
 
    CIRCLE_COUNT = 52; 
 
var appendCircle = function loop() { 
 

 
    setTimeout(function() { 
 
    i++; 
 

 
    // first pass 
 
    if (i < CIRCLE_COUNT * 1) { 
 

 
     var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>"; 
 
     var $container = $(".circles-wrapper .circles"); 
 
     $container.append($circle); 
 
    } 
 
    // second pass 
 
    else if (i < CIRCLE_COUNT * 2) { 
 
     $(".circle" + (i % CIRCLE_COUNT+1)).css('background', 'blue'); 
 
    } 
 
    
 
    // third pass 
 
    else if (i < CIRCLE_COUNT * 3) { 
 
     $(".circle" + (i % CIRCLE_COUNT+1)).remove(); 
 
    } 
 
    
 
    // keep looping? 
 
    if (i <= CIRCLE_COUNT * 3) 
 
     loop(); 
 

 
    }, 20); 
 

 

 
}; 
 

 
setTimeout(appendCircle, 100);

.circles-wrapper { 
 
    position: absolute; 
 
    top: 39%; 
 
    left: 51%; 
 
} 
 
.circles { 
 
    position: relative; 
 
    transform: rotateY(48deg); 
 
} 
 
.circle { 
 
    width: .2em; 
 
    height: .2em; 
 
    margin: -.2em; 
 
    border-radius: 50%; 
 
    background: #ceced0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circles-wrapper"> 
 
    <div class="circles"></div> 
 
</div>

Answer 3

这样的事情？我为了把超时功能，在您的.each()当您更改圆的颜色为蓝色

var i = 1; 
 
var appendCircle = function loop() { 
 

 
    setTimeout(function() { 
 
    var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>"; 
 
    var $container = $(".circles-wrapper .circles"); 
 
    $container.append($circle); 
 
    i++; 
 

 
    if (i < 55) { 
 
     loop(); 
 
    } 
 
    }, 20); 
 

 
    // this is the problem because this change color of all small circles at once. 
 

 
    if (i == 54) { 
 
    var time = 50; 
 
    $(".circle").each(function() { 
 
     var $this = $(this) 
 
     setTimeout(function(){ 
 
     $this.css({ 
 
      "background": "blue" 
 
     }); 
 
     }, time) 
 
     time += 50; 
 

 
    }); 
 
    } 
 
}; 
 

 
setTimeout(appendCircle, 100);

.circles-wrapper { 
 
    position: absolute; 
 
    top: 39%; 
 
    left: 51%; 
 
} 
 
.circles { 
 
    position: relative; 
 
    transform: rotateY(48deg); 
 
} 
 
.circle { 
 
    width: .2em; 
 
    height: .2em; 
 
    margin: -.2em; 
 
    border-radius: 50%; 
 
    background: #ceced0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circles-wrapper"> 
 
    <div class="circles"></div> 
 
</div>

Answer 4

，使每个循环迭代之间的延迟，您需要更改的CSS只是一个元素，然后开始超时更改下一个元素。

var i = 1; 
 
var appendCircle = function loop() { 
 

 
    setTimeout(function() { 
 
    var $circle = "<div class='circle circle" + i + "' style='transform:rotate(" + 7.2 * i + "deg) translate(3em)'></div>"; 
 
    var $container = $(".circles-wrapper .circles"); 
 
    $container.append($circle); 
 
    i++; 
 

 
    if (i < 55) { 
 
     loop(); 
 
    } 
 
    }, 20); 
 

 
    var j = 0; 
 

 
    function changeColor() { 
 
    $(".circle").eq(j).css("background", "blue"); 
 
    j++; 
 
    if (j >= $(".circle").length) { 
 
     clearInterval(changeInterval); 
 
    } 
 
    } 
 
    if (i == 53) { 
 
    setInterval(changeColor, 20); 
 
    } 
 

 
} 
 
setTimeout(appendCircle, 100);

.circles-wrapper { 
 
    position: absolute; 
 
    top: 39%; 
 
    left: 51%; 
 
} 
 
.circles { 
 
    position: relative; 
 
    transform: rotateY(48deg); 
 
} 
 
.circle { 
 
    width: .2em; 
 
    height: .2em; 
 
    margin: -.2em; 
 
    border-radius: 50%; 
 
    background: #ceced0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circles-wrapper"> 
 
    <div class="circles"></div> 
 
</div>

Answer 5

jQuery有功能，使动画像这样的小事合理的，但你需要了解的几种方法。

jQuery的.delay()，.promise()，.then()和如下JavaScript的Array.prototype.reduce()可以利用：

var appendCircles = function($container) { 
    //create and append hidden circles 
    for(var i=0; i<50; i++) { 
     $("<div class='circle'></div>").css('transform', 'rotate(' + 7.2 * i + 'deg) translate(3em)').hide().appendTo($container); 
    } 

    //find the freshly appended hidden circles 
    var $circles = $container.find(".circle"); 

    //initial delay 
    $circles.eq(0).delay(100).promise() 
    .then(function() { 
     //show the circles, one by one 
     return $circles.get().reduce(function(promise, el) { 
      return promise.then(function() { 
       return $(el).show().delay(20).promise(); 
      }); 
     }, $.when());//$when() is a resolved promise that gets the built promise chain started 
    }) 
    .then(function() { 
     //make circles blue, one by one 
     return $circles.get().reduce(function(promise, el) { 
      return promise.then(function() { 
       return $(el).css('backgroundColor', 'blue').delay(20).promise(); 
      }); 
     }, $.when());//$when() is a resolved promise that gets the built promise chain started 
    }); 
}; 

appendCircles($(".circles")); 

codepen

.reduce()需要解释的。 $circles.get()返回一个数组，.reduce(...)用于构建等效于initialPromise.then(...).then(...).then(...)的承诺链。这个技巧按顺序执行两次，以产生最初的“显示”效果，然后是颜色变化效果。

如果你想用jQuery制作自定义动画序列，这套方法是值得学习的。