逐个字母改变文本颜色的方法是什么？
P粉613735289
2023-08-31 13:03:36
<p>我想让文本中的每个字母逐个改变颜色，一个接一个地。例如：
你好世界
“H”将首先变为红色，然后是“E”，然后是“L”，依此类推。</p>
<p>我尝试将每个字母都包裹在一个span中，并使用jquery和循环。但是它不起作用。</p>
<p>
<pre class="brush:js;toolbar:false;">$("span").ready(function() {
var letters = $("span").length;
for (let i = 0; i <= letters; i++) {
$("span")[i].css("color", "red");
}
})</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
</p>
你走在正确的轨道上，但是你需要延迟改变
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))在jQuery中，你可以使用
each函数来循环遍历选择器的所有元素为了在两次颜色变化之间“等待”，你可以将CSS变化嵌入到
setTimeout函数中，链接到each循环的索引$(".letters span").each(function(index, elem) { setTimeout(function() { $(elem).css('color', 'red'); }, index * 500); });