我想让文本中的每个字母逐个改变颜色，一个接一个地。例如： 你好世界 “H”将首先变为红色，然后是“E”，然后是“L”，依此类推。
我尝试将每个字母都包裹在一个span中，并使用jquery和循环。但是它不起作用。
2
1419$("span").ready(function() {
var letters = $("span").length;
for (let i = 0; i <= letters; i++) {
$("span")[i].css("color", "red");
}
})
<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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你走在正确的轨道上，但是你需要延迟改变
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); });