Question

我想一次将这些图标更改为红色，但诀窍是我希望一次只有一个红色，当下一个变为红色时切换回白色。我对如何获得这个问题一无所知。 jQuery或vanilla很好。

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>

编辑：

什么都没有触发颜色变化，我希望它能在一段时间内不断重复这个过程。

Answer 1

您可以使用递归函数和计时器

来完成

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在一组图标之间循环颜色

1 个答案: