Skip to main content
2 de 2
added 2 characters in body

Loop de cores em texto

Tenho a seguinte estrutura em HTML:

<font class="a">J</font>
<font class="b">o</font>
<font class="c">ã</font>
<font class="d">o</font>
<font class="e">P</font>
<font class="f">a</font>
<font class="g">u</font>
<font class="g">l</font>
<font class="i">o</font>
<font class="j">S</font>
<font class="l">a</font>
<font class="m">r</font>
<font class="n">a</font>
<font class="o">g</font>
<font class="p">o</font>
<font class="q">s</font>
<font class="r">s</font>
<font class="s">a</font>

E um JQuery que muda a cor de cada "font":

setInterval(function()
{
    var cores = 
    [
        "#ff00ff",
        "#ff00cc",
        "#ff0099",
        "#ff0066",
        "#ff0033",
        "#ff0000",
        "#ff3300",
        "#ff6600",
        "#ff9900",
        "#ffcc00",
        "#ffff00",
        "#ccff00",
        "#99ff00",
        "#66ff00",
        "#33ff00",
        "#00ff00",
        "#00ff33",
        "#00ff66"
    ]

    letras =
    [
        "a","b","c","d","e","f","g","h","i","j","l","m","n","o","p","q","r","s"
    ]

    for (var i = 0; i <= cores.length; i++) 
    {
        $("font[class ="+letras[i]+"]").css('color', cores[i]);
    }
},500);

Como posso criar um loop que altere a cor das letras num intervalo de tempo, de maneira que a cada intervalo cada letra receba a cor anterior a que havia recebido no loop anterior?

Código