문자 색상을 문자별로 변경하는 방법은 무엇입니까?

Question

<p>텍스트의 각 문자 색상을 하나씩 차례로 변경하고 싶습니다. 예를 들어: 안녕하세요 세계 "H"가 먼저 빨간색으로 변하고, 그 다음 "E", "L" 등으로 변합니다. </p> <p>각 문자를 범위로 묶고 jquery와 루프를 사용해 보았습니다. 하지만 작동하지 않습니다. </p> <p> <pre class="brush:js;toolbar:false;">$("span").ready(function() { var 문자 = $("span").length; for (let i = 0; i <= 문자; 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"> ;</스크립트> <span>H</span> <span>E</span> <스팬>L <스팬>L O <span>, </span> W O <span>R</span> <스팬>L <span>D</span></pre> </p>

Answer 1

올바른 길을 가고 있지만 변경을 연기해야 ​​합니다color的时间（比如说100ms），这样效果才能被看到。为了延迟，我们使用了接受2个参数的方法setTimeout:

1. 필요한 지연 시간이 경과한 후 호출되는 콜백 함수입니다.
2. 지연 시간이 필요합니다(예: 100ms).

100ms，我们应该将其乘以当前字母的索引（准确地说是当前的span와 같은 지연 시간을 선택할 때 효과를 볼 수 있도록 현재 문자의 인덱스(정확하게는 현재 span)를 곱해야 합니다.

실시간 데모입니다:

으아악 으아악

Answer 2

jQuery에서는 each 함수를 사용하여 선택기의 모든 요소를 ​​반복할 수 있습니다.

두 가지 색상 변경 사이를 "대기"하려면 CSS 변경 사항을 각 루프의 인덱스에 연결된 setTimeout 함수에 포함할 수 있습니다

으아악 으아악