[JS] width dynamisch verändern

TechnoLogiY92

Ik Wil Hakke!
ID: 319541
L
12 Mai 2008
182
33
Hi

Ich habe einen Div-Container:
Code:
<div style="width:50px;background:#000000;"></div>

Nun möchte ich den Container per JavaScript funktion verändern. Undzwar nicht einfach in einem "Zack!", sondern langsam. Sprich, erst 51px, dann 52px, 53px, ... und das bis zu einer bestimmten Angabe!

Habe schon alles mögliche versucht mit For-Schleifen und Timeouts - hat alles nicht geklappt (hat einfach garnichts gemacht).

Wie ginge das?

Ciao!
 
Bevor ich mir 'nen Wolf erklär, poste ich lieber den Code, damit wirste bestimmt auch was anfangen können. ;)
HTML:
<html>
<head>
<script type="text/javascript">
//<![CDATA[
window.onload = function () {
	var width = parseInt(document.getElementById('bar').style.width);
	if (width<500) {
		document.getElementById('bar').style.width = (width+1)+'px';
		setTimeout(arguments.callee, 50);
	}
}
//]]>
</script>
</head>
<body>
	<div id="foo" style="width: 500px; border: 1px solid red;">
		<div id="bar" style="width: 50px; background-color: #000;"> </div>
	</div>
</body>
</html>
Hope that helps.