bei onmouseover sanft auf 100 pixel vergrößern

php_frage · 28.04.2006, 21:24

Hallo

Ich hab nen Element das ich mit

Code:

onmouseover="this.style.height='100px';"

auf 100 pixel höhe bringe, wenn die Maus darüber ist. Das Gegenstück dazu ist:

Code:

onmouseout="this.style.height='60px';"

...das macht das Element wieder klein, wenn die Maus weg ist. Funktioniert einwandfrei.

Was aber noch stört ist, das die Seite darunter dann so schlagartig nach unten ruckt. Logisch eigentlich.

In Javascript gibt's doch so ne Art delay und schleifen. Kann man ohne größeren Umweg die Größe des elements sanft ändern, in dem der height-wert langsam von 60 auf 100 erhöht wird?

28.04.2006, 21:36

Vielleicht findest du hier was passendes: http://www.jswelt.de/index.php?opencat=JavaScripts

Gruß
phpfan

php_frage · 28.04.2006, 22:19

Hab mal was gebastelt das soweit funktioniert:

Code:

<script type="text/javascript">
function agb_bigger(){
	var h;
	h = document.getElementById("agb").style.height;
	h = h.replace("px","");
	if(h < 150){
		h++;
		h++;
		h++;
		h++;
		h++;
		h++;
		document.getElementById("agb").style.height=h+'px';
		window.setTimeout("agb_bigger()", 10);
	}
}

function agb_smaller(){
	var h;
	h = document.getElementById("agb").style.height;
	h = h.replace("px","");
	if(h > 60){
		h--;
		h--;
		h--;
		h--;
		h--;
		h--;
		document.getElementById("agb").style.height=h+'px';
		window.setTimeout("agb_bigger()", 10);
	}
}
</script>

Im Textarea binde ich ein:

Code:

onmouseover="agb_bigger();" onmouseout="agb_smaller();"

Problem: Ist agb_bigger(); einmal aktiviert, ist es für immer aktiv! Wenn die Maus dann raus geht, wird agb_smaller(); aktiviert. Die Textarea wird KURZ klein, aber nur ein stückchen, und ist dann wieder riesen groß

... weil nämlich agb_bigger() immer noch aktiv ist, und die Textarea auf volle größe hält.

Ich habe bewusst die Größenangaben dynamisch übernommen, damit es nicht zu merkwürdigen rucklern kommt wenn die maus schnell rein und raus geht. Hoffe ihr versteht was ich meine...

Irgendwie muss man agb_bigger(); stoppen, wenn agb_smaller(); ausgeführt wird. Wenn dann wieder agb_bigger(); ausgeführt wird, muss agb_smaller(); gestoppt werden.

Aber ich habe keinen Plan wie man ein JS stoppen kann

php_frage · 28.04.2006, 22:21

ach ja die vielen h++ bitte ignorieren

kann man auch mit h += 6 regeln

28.04.2006, 22:46

Nicht per setTimeout aufrufen, sondern per setInterval
http://de.selfhtml.org/javascript/ob...m#set_interval

Rückgabewert speichern und clearInterval aufrufen, wenn
a) das Objekt seine maximale/minimale Ausdehnung erreicht hat
b) die "Gegenaktion" ausgeführt wird.
http://de.selfhtml.org/javascript/ob...clear_interval

php_frage · 29.04.2006, 00:43

gute Idee mit dem setInterval. Mit setTimeout ging's zwar auch, aber mit setInterval läuft's noch sauberer, weil die Vergrößerung sofort stoppt wenn die Maus aus dem Textarea raus ist. Danke für den Tipp

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

28.04.2006, 21:24
php_frage Benutzer Registriert seit: 17.12.2005 Beiträge: 93	bei onmouseover sanft auf 100 pixel vergrößern Hallo Ich hab nen Element das ich mit Code: onmouseover="this.style.height='100px';" auf 100 pixel höhe bringe, wenn die Maus darüber ist. Das Gegenstück dazu ist: Code: onmouseout="this.style.height='60px';" ...das macht das Element wieder klein, wenn die Maus weg ist. Funktioniert einwandfrei. Was aber noch stört ist, das die Seite darunter dann so schlagartig nach unten ruckt. Logisch eigentlich. In Javascript gibt's doch so ne Art delay und schleifen. Kann man ohne größeren Umweg die Größe des elements sanft ändern, in dem der height-wert langsam von 60 auf 100 erhöht wird?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.04.2006, 21:36
Gast Beiträge: n/a	Vielleicht findest du hier was passendes: http://www.jswelt.de/index.php?opencat=JavaScripts Gruß phpfan

28.04.2006, 22:19
php_frage Benutzer Registriert seit: 17.12.2005 Beiträge: 93	Hab mal was gebastelt das soweit funktioniert: Code: <script type="text/javascript"> function agb_bigger(){ var h; h = document.getElementById("agb").style.height; h = h.replace("px",""); if(h < 150){ h++; h++; h++; h++; h++; h++; document.getElementById("agb").style.height=h+'px'; window.setTimeout("agb_bigger()", 10); } } function agb_smaller(){ var h; h = document.getElementById("agb").style.height; h = h.replace("px",""); if(h > 60){ h--; h--; h--; h--; h--; h--; document.getElementById("agb").style.height=h+'px'; window.setTimeout("agb_bigger()", 10); } } </script> Im Textarea binde ich ein: Code: onmouseover="agb_bigger();" onmouseout="agb_smaller();" Problem: Ist agb_bigger(); einmal aktiviert, ist es für immer aktiv! Wenn die Maus dann raus geht, wird agb_smaller(); aktiviert. Die Textarea wird KURZ klein, aber nur ein stückchen, und ist dann wieder riesen groß ... weil nämlich agb_bigger() immer noch aktiv ist, und die Textarea auf volle größe hält. Ich habe bewusst die Größenangaben dynamisch übernommen, damit es nicht zu merkwürdigen rucklern kommt wenn die maus schnell rein und raus geht. Hoffe ihr versteht was ich meine... Irgendwie muss man agb_bigger(); stoppen, wenn agb_smaller(); ausgeführt wird. Wenn dann wieder agb_bigger(); ausgeführt wird, muss agb_smaller(); gestoppt werden. Aber ich habe keinen Plan wie man ein JS stoppen kann

28.04.2006, 22:21
php_frage Benutzer Registriert seit: 17.12.2005 Beiträge: 93	ach ja die vielen h++ bitte ignorieren kann man auch mit h += 6 regeln

28.04.2006, 22:46
Gast Beiträge: n/a	Nicht per setTimeout aufrufen, sondern per setInterval http://de.selfhtml.org/javascript/ob...m#set_interval Rückgabewert speichern und clearInterval aufrufen, wenn a) das Objekt seine maximale/minimale Ausdehnung erreicht hat b) die "Gegenaktion" ausgeführt wird. http://de.selfhtml.org/javascript/ob...clear_interval

29.04.2006, 00:43
php_frage Benutzer Registriert seit: 17.12.2005 Beiträge: 93	gute Idee mit dem setInterval. Mit setTimeout ging's zwar auch, aber mit setInterval läuft's noch sauberer, weil die Vergrößerung sofort stoppt wenn die Maus aus dem Textarea raus ist. Danke für den Tipp