在一組圖標之間循環一個顏色

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

編輯：

沒有觸發的顏色變化，我希望它不斷重複在某個區間的過程。

來源

2016-10-18 Taylor Foster

將有助於提供關於是什麼觸發了顏色變化更多信息做到這一點。點擊，計時器等 – itsthejash

像這樣 - > https://jsfiddle.net/adeneo/zr7k4257/ – adeneo

@adeneo正確，tysm –

您可以用遞歸函數和一個計時器

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>

來源

2016-10-18 18:57:22 adeneo

在一組圖標之間循環一個顏色

回答

相關問題