P粉5210131232023-09-01 10:14:21
你走在正确的轨道上,但是你需要延迟改变color
的时间(比如说100ms
),这样效果才能被看到。为了延迟,我们使用了接受2个参数的方法setTimeout
:
100ms
)。当选择一个延迟时间,比如100ms
,我们应该将其乘以当前字母的索引(准确地说是当前的span
),这样效果才能被看到。
这是一个实时演示:
/** * 循环遍历“span”元素。 * 延迟100ms * i(当前span索引),以便稍后改变索引为“i”的span的颜色。 * 你可以根据需要更改延迟时间(在这个例子中是100)。 */ $('span').each((i, el) => setTimeout(() => $(el).css('color', 'red'), i * 100))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span> <span>, </span> <span>W</span> <span>O</span> <span>R</span> <span>L</span> <span>D</span>
P粉8659009942023-09-01 00:21:23
在jQuery中,你可以使用each
函数来循环遍历选择器的所有元素
为了在两次颜色变化之间“等待”,你可以将CSS变化嵌入到setTimeout
函数中,链接到each循环的索引
$(".letters span").each(function(index, elem) { setTimeout(function() { $(elem).css('color', 'red'); }, index * 500); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="letters"> <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span> <span>, </span> <span>W</span> <span>O</span> <span>R</span> <span>L</span> <span>D</span> </div>