Animationsprobleme mit JS

philipp · 17 August 2006

warum geht das nicht?
hab ein musterbeispiel nur minimal abgeändert...

HTML:

<html>
<head>
<title>Tan-und-Nacht-Skript</title>
<script language="JavaScript">
<!--
function showmenu(menuID) {
	var layer_hidden = document.getElementById(menuID);
	var layer_posi = parseInt(layer_hidden.style.left);
	if ( layer_posi < 0 ) {
		layer_hidden.style.left = (layer_posi+7) + "px";
		setTimeout("showmenu('menuID')", 3);
	}
}
function hidemenu(menuID) {
	var layer_visible = document.getElementById(menuID);
	var layer_posi = parseInt(layer_visible.style.left);
	if ( layer_posi > -300 ) {
		layer_visible.style.left = (layer_posi-7) + "px";
		setTimeout("hidemenu('menuID')", 3);
	}
}
-->
</script>
<style type="text/css">
<!--
*, html {
	font-family: garamond, serif;
	color: #000; }
a:visited, a:active, a:link {
	color: #000; }
a:hover {
	color: #00F; }
#layer {
	position:absolute;
	background-color:#DDD;
	color: #000;
	z-index:1;
	width:300px; height:400px; }
.show {
	text-align:right;
	margin: 20px 20px 5px 0px;}
-->
</style>
</head>
<body>
<div style="left:-300px;top:20px;" id="layer"><p>&nbsp;</p></div>
<p class="show"><a href="#" onmouseover="showmenu('layer');" onmouseout="hidemenu('layer');">&raquo;&nbsp;Anzeigen</a></p>
</body>
</html>

der layer wird nur ein einzigiges mal um 7px verschoben

soll ichs mit for versuchen?

okay, ich vermute, dass es daran liegt:

Code:

	setTimeout("hidemenu('menuID')", 3);

mit

Code:

	var menu = menuID;
.............................................
		setTimeout("hidemenu(menu)", 3);

gehts a ned...

Commodore · 17 August 2006

also was ich direkt sehe, ist dass beim timeout nicht die variable für die box übergeben wird. du kannst versuchen es so zu machen:

Code:

setTimeout("hidemenu('layer')",3)

allerdings müsstest du bei dieser variante dann für jede box einen einzelne funktion machen.

andere möglichkeit wäre:

Code:

var feld = "";
function showmenu(feld){
function wechsel(){
var layer_posi = parseInt(feld.style.left);
if ( layer_posi < 0 ) {
feld.style.left = (layer_posi+7) + "px";
setTimeout("wechsel()", 3);
}
}
}

allerdings habe ich das ganze nicht getestet, daher garantiere ich nicht, dass es funktioniert ;-)

ps: du solltest in den code noch eine if-abfrage reinmachen, die abfragt wie die auelle position des divvs ist (und je nachdem den code weiter ausführt), da sonst der div ins unendliche nach rechts rausgezogen.

philipp · 23 August 2006

ich hab noch kein einziges funktionierendes javascript geschafft... keins

und letztens ein 400 zeilen php script ohne einen testlauf zum laufen bekommen.

also mein letzter versuch beschäftigte sich mit selbem problem, syntaktisch is es eine katastrophe, ich hätte mir min. 2 parameter sparen können... naja ich habs eben so gemacht

Code:

function slidein(box_id, dir_hor, dis_hor, dir_ver, dis_ver, slidespeed, stepsize) {
	var box = document.getElementById(box_id);
	var posi_hor = parseInt(box.style.left);
	var posi_ver = parseInt(box.style.top);
	if ( dir_hor == '+' ) {
		posi_hor.max = posi_hor+dis_hor;
	} else {
		posi_hor.max = posi_hor-dis_hor;
	}
	if ( dir_ver == '+' ) {
		posi_ver.max = posi_ver+dis_ver;
	} else {
		posi_ver.max = posi_ver-dis_ver;
	}
	if ( slidespeed < 1 ) {
		slidespeed = 1;
	}
	if ( stepsize < 1 ) {
		stepsize = 1;
	}
	
	if ( dir_ver == '+' ) {
		//Vertikale verschiebung nach rechts
		if ( posi_ver < posi_ver.max ) {
			box.style.left = (posi_ver + stepsize) + 'px';
			if ( dir_hor == '+' ) {
				//Horizontale verschiebung nach unten
				if ( posi_hor < posi_hor_max ) {
					box.style.top = (posi_hor + stepsize) + 'px';
				}
			} else {
				//Horizontale verschiebung nach oben
				if ( posi_hor > posi_hor.max ) {
					box.style.top = (posi_hor - stepsize) + 'px';
				}
			}
			setTimeout();
		}
	} else {
		//Vertikale verschiebung nach links
		if ( posi_ver > posi_ver.max ) {
			box.style.left = (posi_ver - stepsize) + 'px';
			if ( dir_hor == '+' ) {
				//Horizontale verschiebung nach unten
				if ( posi_hor < posi_hor_max ) {
					box.style.top = (posi_hor + stepsize) + 'px';
				}
			} else {
				//Horizontale verschiebung nach oben
				if ( posi_hor > posi_hor.max ) {
					box.style.top = (posi_hor - stepsize) + 'px';
				}
			setTimeout();
		}
	}
}

könnte mir eventuell jemand da helfen?
ich hätte gern so ein script..

Animationsprobleme mit JS

philipp

Neues Mitglied

Commodore

Guest

philipp

Neues Mitglied

Neueste Beiträge