molily: Rechnen mit variable

Beitrag lesen

SELF-Forum

Rechnen mit variable

molily
+2 Informationen zu den Bewertungsregeln

Hallo,

function fadeIn(){
akt_wert = window.getComputedStyle(document.getElementById("package"), null).getPropertyValue("opacity");
erhoeheopacity(akt_wert);}

Du verwendest hier parseFloat nicht, wie es dir geraten wurde, also ist akt_wert ein String.

akt_wert = parseFloat(akt_wert);

wandelt den Wert der Variable akt_wert in eine Zahl um und schreibt diesen Wert zurück in die Variable.

  	akt\_wert += 0.05;

Hier hängst du dem String eine Number an, dadurch wird die Number zu einem String umgewandelt. Ist der akt_wert vorher "0.5", ist akt_wert nun "0.50.05".

  	document.getElementById("package").style.opacity

+=akt_wert;

Hier hängst du dem aktuellen opacity-Wert (ein String) akt_wert (ein String) an. Ist der opacity-Wert vorher "0.5", so hängst du ihm nun "0.50.05" an, sodass der opacity-Wert nun "0.50.50.05" ergibt.

Hier musst du einfach eine Zuweisung mit = vornehmen, nicht noch einmal += verwenden:

document.getElementById("package").style.opacity = akt_wert;

Wenn du an der richtigen Stelle parseFloat verwendest, so kannst du auch Zahlen addieren.

Der +-Operator in JavaScript addiert Zahlen, er verknüpft aber auch Strings. Beide Operanden müssen Zahlen sein, damit er sie addiert. Wenn ein Operand ein String ist, wird auch der andere in einen String umgewandelt und die beiden Strings werden verkettet.

Ferner hast du anscheinend noch nicht ganz verstanden, wie eine Animation funktioniert. Du kannst hier nicht mit einer for-Schleife arbeiten. Die Animation funktioniert einfach so, dass sich die Animier-Funktion mit setTimeout immer wieder selbst verzögert aufruft. Wenn das Ziel erreicht ist, dann ruft sie sich einfach nicht mehr auf. Du rufst allerdings zusätzlich setTimeout in einer Schleife auf, was zur Animation nichts beiträgt.

Es geht viel einfacher ohne diese Schleife. Ein Beispiel:

<!DOCTYPE html>  
<p id="package" style="opacity: 0">foo</p>  
<script>  
  
[code lang=javascript]function fadeIn (element) {  
  var opacity = getComputedStyle(element, null).opacity;  
  opacity = parseFloat(opacity);  
  animateOpacity(element, opacity);  
}  
  
fadeIn(document.getElementById("package"));  
  
function animateOpacity (element, opacity) {  
  if (opacity >= 1) return; // Breche ab, wenn 1 erreicht wurde  
  opacity += 0.05;  
  element.style.opacity = opacity;  
  setTimeout(function () {  
    animateOpacity(element, opacity);  
  }, 500);  
}

</script>[/code]

Mathias

Beitrag melden
+2
Informationen zu den Bewertungsregeln