Animacja poszczególnych liter paragrafu (p)

Czy żeby animować (poruszać w płaszczyźnie pionowej) litery tekstu, zawartego w paragrafie <p>, należy każdą literę umieścić w osobnym znaczniku (np. <span>)?

Napisałem takie coś:

var p = document.createElement("p");
p.setAttribute("id", "test");
document.getElementsByTagName("body")[0].appendChild(p);

p.innerHTML = "<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span>";

var spans = document.getElementsByTagName("span");

function setOnStart()
{
	for (var i = 0; i < spans.length; i++)
	{
		spans[i].style.position = "absolute";
		spans[i].style.top = 20 * i;
		spans[i].style.left = 20 * i;
	}
}

function animate()
{
	console.log("OK");
	for (var i = 0; i < spans.length; i++)
		if (parseInt(spans[i].style.top) > 0)
			spans[i].style.top = (parseInt(spans[i].style.top) - 5) + "px";
}

setOnStart();

var interID = window.setInterval(animate, 10);

function clearInter()
{
	console.log("STOP");
	clearInterval(interID);
}

window.setTimeout("clearInter", 1000);

Działa ok, tylko ostatnia funkcja (setTimeout) nie anuluje intervalu. Dlaczego?

dodanie znacznika <code class="javascript"> - @furious programming