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](http://jsfiddle.net/7XN2H/)