opacity effect

[molily]

Hallo tropenberta,

Generell kannst du dir einmal den Artikel Fader-Framework in JavaScript ansehen. Die ersten Seiten des Artikels erklären, wie Animationen in JavaScript grundlegend gelöst werden.

function opening(id)
{
if ( id == '1' )
  { var op = 0.0;

var op = 0; reicht hier aus.

window.setTimeout("effect()",0);

Hier kannst du auch einfach effect(); schreiben, oder musst du hier aus dem aktuellen Stack springen? Diesen Trick wendet man i.d.R. nur an, wenn man aus der aktuellen Funktionsausführung springen will, sodass der sogenannte Event Loop die angegebene Funktion ausführt, wenn alle anderen wartenden ausgeführt worden sind. (Wenn dir das nichts sagt, reicht vermutlich effect().)

Außerdem kannst du hier direkt

setTimeout(effect, 0);

schreiben und das Funktionsobjekt effect übergeben. Zu Verstehen, dass Funktionen vollwertige Objekte in JavaScript sind, ist sehr wichtig.

function effect()
     {
      var cont = document.getElementById("openmenu").style.opacity

Das liest den Inline-Style aus. Der ist erst einmal leer (ein leerer String), sofern du ihn vorher nicht im style-Attribut im HTML oder per JavaScript gesetzt hast.

Sinnvoller wäre getComputedStyle, siehe CSS-Eigenschaften mit JavaScript auslesen.

Dass der Wert beim ersten Mal leer ist, ist hier nicht so schlimm:

if ( cont < 0.9 )

Diese Abfrage ergibt trotzdem true, weil der leere String für den Vergleich automatisch in eine Zahl umgewandelt wird, was 0 ergibt.

cont = op;

Diese Zuweisung ändert den Variablenwert, mehr nicht. Die Variable ist nicht magisch mit der opacity-Eigenschaft verknüpft. Du musst diese schon explizit setzen:

// Element nur einmal holen und in einer Variable speichern  
var element = document.getElementById("openmenu");  
// Inline-Style lesen  
var opacity = element.style.opacity;  
// Schreiben  
element.style.opacity = newOpacity;

window.setTimeout("effect()",100); }

Hier reicht auch:

setTimeout(effect, 100);

Allgemein schleift man den aktuellen Wert durch, anstatt immer mit jedem Animationsframe (Ausführung von effect) den vorhandenen Wert zu lesen, bevor man ihn schreibt. Das verbessert die Performance. Dazu muss man aber mit Closures arbeiten, sodass sich die Schritt-Funktion effect verzögert immer wieder mit dem aktuellen Wert aufruft.

Wenn du gerade lernen möchtest, kannst du dir auch requestAnimationFrame ansehen, eine bessere Alternative zu setTimeout für Animationen.

Grüße,
Mathias