Javascript e css per allargare un div in modo fluido

[Shadow976]

Cari utenti,
vorrei fare in modo che tramite l'utilizzo di Javascript e CSS, alla pressione di un pulsante accada che un elemento div della mia pagina possa allargarsi progressivamente in modo "fluido", come fosse un'animazione, impiegando alcuni decimi di secondo a raggiungere la sua larghezza definitiva. Ecco il codice che ho utilizzato, il quale però fa allargare tale elemento in un istante come fosse una normale azione javascript. Cosa sbaglio? Grazie a tutti.

/*allarga l'elemento di un pixel per volta, facendo trascorrere tra un'azione e l'altra alcune frazioni di secondo, in modo che l'utente lo veda allargarsi sotto i propri occhi in modo fluido e non con una unica azione*/
i = 0;
do {setTimeout("document.getElementById('mydiv').style.width = i + '%';", 200); i++;} while(i<=100);

[Xinod]

cosi' tu setti un' infinita' di timeout senza aspettare che il precedente si verifichi

setta il timeout in una funzione che richiama se' stessa

function anima(){
...
setTimeout(function(){anima()},200)
}

e quando ti serve richiami anima() per avviare l' animazione

[Shadow976]

Xinod grazie intanto per la tua risposta... Potresti indicarmi qualche dettaglio in più? Dove mettere lì dentro il codice sull'allargamento del div e come richiamare correttamente la funzione? Ho fatto diversi tentativi ma di sicuro sbaglio io a interpretare le tue indicazioni perché non accade nulla, se potesi indicarmi la funzione completa (anche con il codice che fa allargare il div, che io sicuramente ho inserito nel punto sbagliato) mi faresti un grosso regalo.

[Shadow976]

EDIT: non so più dove mettere mano, se la funzione che allarga il div la metto in qualsiasi punto del codice che mi hai postato (dove ci sono i puntini, prima, dopo) comunque non accade nulla. Tutto come prima, sono ancora in alto mare. Come fare in modo che questo benedetto tag si allarghi in modo dinamico? Sono nelle vostre mani. Grazie

[Xinod]

<style type="text/css">
#elemento {
	position:absolute;
	width:100px;
	height:100px;
	border:1px solid #f00;
}
</style>
<script type="text/javascript">
function animaWidth(el,to){
	if(!el.id) el=document.getElementById(el);
	var elW=parseInt(el.style.width)||100;
	if(elW<to){
		el.style.width=(elW+1)+'px';
		setTimeout(function(){animaWidth(el,to)},50);
	}
}
</script>
<div id="elemento"></div>
animaWidth('elemento',500)

consideralo uno spunto
di piu' non posso fare per te al momento

ciao

[Shadow976]

Ma come non puoi fare di più? Hai risolto il quesito, funziona perfettamente! Mi sei stato di grande aiuto.

Grazie tantissimo, quesito concluso.