逐個更改項目的顏色

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製作自定義動畫序列，這套方法是值得學習的。