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?