Display Block und None

[juergen]

Hallo Forum,

ich habe volgendes JS:
Ich klappe damit DIV-Kontainer meiner Navigation auf und zu.
Ich möchte nun das der DIV-Kontainer nicht so ruckartig aufgeht sondern aufscrollt.
Kann mir da einer weiterhelfen? Geht das überhaubt?
Danke für Eure Hilfe.

	
<script language="Javascript">
<!-- 
	function b_menue(b_auf) {
	
		var b_menues = new Array("1alfa","2alfa","3alfa","4alfa");
		var b_mode = 1;
		if (document.getElementById(b_auf).style.display == "none") b_mode = 0;
		for (var b_x=0; b_x<b_menues.length; b_x++) {
	
	document.getElementById(b_menues[b_x]).style.display = "none";
	document.getElementById("b_"+ b_menues[b_x]).src = "../navi/images/down.gif";

		}
		if (b_mode == 0) {

	document.getElementById(b_auf).style.display =	"block";
	document.getElementById("b_"+ b_auf).src = "../navi/images/right.gif";	
	
		} else {

	document.getElementById(b_auf).style.display =	"none";
	document.getElementById("b_"+ b_auf).src = "../navi/images/down.gif";

		}
	}
//-->
</script>

[Andes]

Jo, dass geht. Dafür muss aber die DivBox absolut positioniert sein. Mit setInterval() kannst du dies steuern. Eine Funktion schreiben die bei jedem Aufruf n zum Positionswert hinzu addiert. Diese Funktion mit setInterval() sich selbst aufrufen.
Ist der Endwert erreicht mit clearInterval() den Interval Stoppen. Wie schnell dies ablaufen soll kannst du über den Zeitwert bei setInterval() steuern.

OffsetLeft, wenn du die Styleangaben ausgelagert hast und nicht wie ich hier im style-Attribute der Divbox definiert habe. Bei ausgelagerten Styleangaben kann Javascript nicht ohne weiteres darauf zugreifen.

function bewegen() {
	var zeit;
	var ende = 0;
	var box = document.getElementById('divbox');
	var akt = box.offsetLeft;
	if(akt < ende) {
		box.style.left = (akt + 10)+'px';
		zeit = window.setInterval('bewegen()', 100);
	}
	else window.clearInterval(zeit);
}

<div id="divbox" style="position:absolute; top:100px; left:-90px; width:100px; height:100px; border:1px solid black;" onclick="bewegen();"></div>