Problem: Element langsam einblenden

[pokerflat]

Hallo Leute,
ich will mit dieser Funktion HTML Elemente über das CSS -Attribut "opacity" langsam einblenden:

function fadeIn(element, speed) {
element.style.display = "block";
element.style.opacity = "0.1";
var i = 0;
while (i < 1) {
i = i + speed;
element.style.opacity = "i";
}
}

Das funktioniert allerdings nicht so wie ich will.
Ich weiß auch wo das Problem liegt, nämlich bei element.style.opacity = "i";
Diese Zeile setzt opacity ja einfach auf den Buchstaben "i", da es sich ja um einen String handelt.
Wenn ich nur i eingebe, also ohne "", funktioniert das aber auch nicht.
Kann mir da jemand helfen?
Gruß

 

[Tronjer]

Dafür gibt es doch jQuery

http://api.jquery.com/fadein

 

[threadi]

Dafür gibt es doch CSS transition und animation:
http://www.mediaevent.de/css/transition.html
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

 

[Tronjer]

Nebenbei bemerkt könntest du den obigen Code zumindest dazu verwenden, etwas über JS zu lernen. Schreibe doch in die while-Schleife mal: console.log(i)

und schau dir die Ausgabe in der Konsole von Firebug an.

 

[pokerflat]

Ich wollte auf jQuery wenns geht ganz verzichten aber die CSS transition Funktionen hören sich ganz gut.
Also mir ist durch einen alert der "i" ausgibt schon aufgefallen dass der Wert nicht immer genau eine ganze Zahl ausgibt, sondern eine Kommazahl mit recht vielen Stellen.
Dadurch kann es vorkommen dass ein Schleifendurchgang mehr ausgeführt wird als gewollt (0.9999999999).
Wolltest du darauf hinhaus Tronjer?
Sollte ich die Zahlen vielleicht aufrunden oder gibt es eine Möglichkeit einen Wert als ganze Zahl zu definieren?

Und danke für die Antworten,
Gruß