搜索

首页  >  问答  >  正文

逐个字母改变文本颜色的方法是什么?

<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>
P粉613735289P粉613735289456 天前710

全部回复(2)我来回复

  • P粉521013123

    P粉5210131232023-09-01 10:14:21

    你走在正确的轨道上,但是你需要延迟改变color的时间(比如说100ms),这样效果才能被看到。为了延迟,我们使用了接受2个参数的方法setTimeout

    1. 一个回调函数,在所需延迟时间过后被调用。
    2. 所需的延迟时间(比如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>

    回复
    0
  • P粉865900994

    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>

    回复
    0
  • 取消回复