アイコンセット間の色をループする

Question

これらのアイコンを一度に赤色に変更したいが、トリックは、一度に1つだけ赤くし、次のものが赤に変わると白に戻したい。私はこれを得る方法について空白を描いています。 jQueryまたはバニラは問題ありません。

HTML（アイコンはデフォルトで白）：

<div class="icon-row"> 
    <i class="fa fa-caret-right" aria-hidden="true"></i> 
    <i class="fa fa-caret-right" aria-hidden="true"></i> 
    <i class="fa fa-caret-right" aria-hidden="true"></i> 
</div> 

EDIT：色の変化をトリガ

何も、私はそれが間隔でプロセスを繰り返しておきたいです。

Answer 1

あなたは再帰関数でそれを行うことができ、タイマー

var els = $('.icon-row .fa'), 
 
    delay = 500; 
 

 
(function rec(el, time) { 
 
    el.delay(time).queue(function() { 
 
    \t var f = els.css('color','black').first(); 
 
    \t var n = $(this).css('color','red').next(); 
 
     
 
     rec(n.length ? n : f, time); 
 
     $(this).dequeue(); 
 
    }); 
 
})(els.first(), delay);

* {font-size: 30px; font-weight: bolder;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="icon-row"> 
 
    <i class="fa fa-caret-right" aria-hidden="true">A</i> 
 
    <i class="fa fa-caret-right" aria-hidden="true">A</i> 
 
    <i class="fa fa-caret-right" aria-hidden="true">A</i> 
 
</div>