Semplice animazione non funziona

[mecha]

Semplice animazione non funziona

Ho scritto un codice di test per capire dov'è che sbaglio nella realizzazione di un'animazione all'interno di un mio script.

<div id="box" style="background: #FF0000; height: 200px; width: 200px;"></div>
<script type="text/javascript">
var timeline = 100
var l = 0
while (l < 300) {
	l = l + 1
	var t =setTimeout(document.write("test <br />"), timeline)
	timeline = timeline + 100
}
</script>

Quello che voglio ottenere qui è che il box si sposti lentamente verso destra fino a fermarsi a 300px dal limite sinistro della pagina.

Il risultato però è diverso. Il box comprare per un appena percettibile istante tutto a sinistra, ma un attimo dopo si sposta 300px più a destra in un colpo solo, senza animazione.

Dove sbaglio?

[mecha]

Risolto! Ho riscritto tante volte il codice ogni volt ain un modo diverso, non riuscendo a capire perché non funzionasse. Poi ho "scoperto" che servono gli apici intorno al primo argomento di setTimeout

Ad ogni modo questa qui funge e può essere riadattata per ottenere qualsiasi effetto di transizione. Se serve...

<div id="box" style="background: #FF0000; height: 200px; width: 200px;"></div>
<script type="text/javascript">
var time = 20
var l = 0
function slidelabel() {
	l += 1
	//time += 10
	document.getElementById('box').style.marginLeft = l + 'px'

	//alert(document.getElementById('box').style.marginLeft)
	if (l < 300) var t = setTimeout("slidelabel()", time)
	else clearTimeout(t)
}
slidelabel()</script>

Ciao!