• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

FadeIn mit JS

Hallo kkapsner

Zu Deinem Code von #35, den ich sogar verstehe, bis auf eins:
Warum muss man die Funktion "changeOpacity()" in eine Funktion "init()" packen?
Habe es wie unten versucht, aber funktioniert tatsächlich nicht:

Code: 
<!DOCTYPE html>
<html>
	<head>

		<title>CSS Transparenz per JavaScript ändern • style.opacity</title>
		<meta charset="UTF-8">

		<script>
		function changeOpacity(element, increment, interval){
				var transp = parseFloat(element.style.opacity);
				if (isNaN(transp)){
					transp = 1;
				}
				transp += increment;
				if (transp >= 0 && transp <= 1){
					element.style.opacity = transp;
				}
				else {
					window.clearInterval(call);
				}
			}
			var call = window.setInterval(changeOpacity, interval);
		</script>

	</head>
	<body>
		<div id="box" style="background: #000000; color: #ff0000; padding:10px;" onclick="changeOpacity(this, -0.02, 100)">
			FadeIn/Out
		</div>
	</body>
</html>

Liegt es vielleicht daran, dass die Funktion mehrfach aufgerufen wird? Beim Funktionsaufruf mit "onclick" werden ja die Parameter an die Funktion übergeben, und die bleiben doch bei den weiteren Aufrufen drin? Die weiteren Aufrufe geschehen ja nicht mehr mit "onclick", aber die übergebenen Parameterwerte werden doch nach dem ersten "Durchlauf" nicht geleert, oder? Kann mir auch sonst keinen Grund für diese "init"-Funktion denken - aber eben, ohne funktioniert's halt leider nicht …
 
call muss keine globale Variable sein.
...
Ja, aber nur wenn man wie du eine Wrapper-Funktion drum rum baut. Sonst kann man das per clearInterval() nicht stoppen.
Zum Vergrößern anklicken....
Dadurch dass sich die Funktion innerhalb von init() befindet, wird die lokale Variable call im Scope gültig.


w3schools schrieb:
To be able to use the clearInterval() method, you must use a global variable when creating the interval method.
Zum Vergrößern anklicken....
 
Dein Code oben wirft einen Fehler in der Fehlerkonsole und das ist auch schon ein Teil des Geheimnisses: die init-Funktion wird eigentlich nur benötigt, um das Interval zu setzen (und um einen Scope für die ganzen Variablen zu haben).

Man kann das Ganze auch mit nur einer Funktion lösen - dann muss man aber über window.setTimeout() gehen, wenn man keine globale Variable haben will (was wir nicht wollen):
Code: 
<!DOCTYPE html>
<html>
	<head>

		<title>CSS Transparenz per JavaScript ändern • style.opacity</title>
		<meta charset="UTF-8">

		<script>
			function changeOpacity(element, increment, interval){
				var transp = parseFloat(element.style.opacity);
				if (isNaN(transp)){
					transp = 1;
				}
				transp += increment;
				if (transp >= 0 && transp <= 1){
					element.style.opacity = transp;
					window.setTimeout(function(){changeOpacity(element, increment, interval)}, interval);
				}
			}
		</script>

	</head>
	<body>
		<div id="box" style="background: #000000; color: #ff0000; padding:10px;" onclick="changeOpacity(this, -0.02, 100)">
			FadeIn/Out
		</div>
	</body>
</html>

PS: zu dem w3schools: so ein Blödsinn. Das muss keine globale Variable sein. Mal wieder ein Punkt mehr, bei dem w3schools falsche Informationen verbreitet.
 
kkapsner schrieb:
zu dem w3schools: so ein Blödsinn. Das muss keine globale Variable sein. Mal wieder ein Punkt mehr, bei dem w3schools falsche Informationen verbreitet.
Zum Vergrößern anklicken....
Ja, hast recht, stimmt. War ungünstig, ich wollte das nur so rüberbringen, dass man wenn man keine Funktion "außen herum" hat, man eine globale Variable benötigt...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben