逐個字母改變文字顏色的方法是什麼？
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.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); });