FadeIn mit JS

[Gwunderi]

Hallo zusammen,

Bin (endlich!) von IE8 auf IE11 umgestiegen und somit am Skripte umschreiben.

Habe ein farbiges Div mit opacity:0.6 und will es mit JS heller oder dunkler machen.

<div id="d1" class="fade" onMouseUp="heller()"></div>

<script>
function heller()
{d = d1.style.opacity;
d = d - 0.1;
d1.style.opacity = d;
if (d >= 0.3)
	{setTimeout(heller, 500);}}
</script>

Das funktioniert prima, aber wenn ich den Div dunkler machen will anstatt heller, also wenn ich d = d + 0.1 schreibe (anstatt - 0.1), geht es nicht! Ist wirklich sehr sehr komisch …

Schon der untere kurze Code geht nur wenn ich - 0.2 schreibe; + 0.2 funktioniert nicht, es passiert dann einfach nichts.

<script>
function heller()
{d1.style.opacity = d1.style.opacity - 0.2;}
</script>

Bei der Breite z.B. gehen + und - Werte, aber bei opacity nur - Werte.

Weiss da jemand Rat? Danke schon mal und Grüsslein,
Gwunderi

P.S. jQueri meide ich zurZeit bewusst (will ja was lernen ... : )

 

[j-l-n]

Du solltest keine globalen Variablen verwenden. Diese verhalten sich nämlich oft unerwartet und führen zu verwirrenden Problemen. Lokale Variablen haben das Schlüsselwort var, anstatt d = ... musst du dann var d = ... schreiben.
Dein Skript dürfte eigentlich gar nicht funktionieren, da d1.style.opacity völlig invalid und unzulässig ist. Der einzige Grund, warum es trotzdem klappt (was es eigentlich nicht sollte), ist, dass mit jeder ID eine gleichlautende globale JS-Variable erstellt wird - wenn ich mich richtig erinnere, war das die Begründung; das hatten wir nämlich schonmal in einem anderen Thread...
Für den Zugriff auf ein Element mit einer ID ist beispielsweise document.getElementById() die korrekte Methode!


- - - Aktualisiert - - -

Das funktioniert prima, aber wenn ich den Div dunkler machen will anstatt heller, also wenn ich d = d + 0.1 schreibe (anstatt - 0.1), geht es nicht!

Ich habe es gerade ausprobiert und bei mir ist es erstaunlicherweise ebenfalls so. Komisch...

 

[Melewo]

opacity:0.6

Und siehst Du da ein - oder + vor dem Wert?
Ich sehe nur einen Wert.

Was passiert, wenn Du den neuen Wert eine Zeile zuvor ausrechnest und dann nur den neuen Wert (ohne ein Vorzeichen) zuweist?

 

[j-l-n]

@Melewo: Probier's doch einfach mal aus - das geht so in der Form nur mit minus.

 

[Melewo]

@Melewo: Probier's doch einfach mal aus - das geht so in der Form nur mit minus.

Hatte ich vielleicht vor zwei Jahren geschrieben, die Funktion würde ich heute nicht mehr durchgängig groß schreiben, doch vom Prinzip sehe ich hier eine Erhöhung mit ++ als Inkrementor.

Clientseitige Mglichkeiten zum Austausch von Grafiken

 

[j-l-n]

Hatte ich vielleicht vor zwei Jahren geschrieben, die Funktion würde ich heute nicht mehr durchgängig groß schreiben, doch vom Prinzip sehe ich hier eine Erhöhung mit ++ als Inkrementor.

Clientseitige Mglichkeiten zum Austausch von Grafiken

Hast du grad den falschen Thread erwischt?

 

[Melewo]

Hast du grad den falschen Thread erwischt?

Wieso?
Ich dachte es geht um style.opacity und dafür ist doch das Beispiel auf der Seite.

 

[Gwunderi]

Ich habe es gerade ausprobiert und bei mir ist es erstaunlicherweise ebenfalls so. Komisch...

Habe für obigen Skript einen "Trick" ausprobiert; so kann man den Div auch dunkler machen:

<div id="d1" class="fade" style="opacity:0.6;"></div>
<button onMouseUp="dunkler()">dunkler</button>

<script>
function dunkler()
{var d = d1.style.opacity;
d = d*10;
d++
d = d/10;
d1.style.opacity = d;
setTimeout(dunkler, 500);}
</script>

Du solltest keine globalen Variablen verwenden. Diese verhalten sich nämlich oft unerwartet und führen zu verwirrenden Problemen. Lokale Variablen haben das Schlüsselwort var, anstatt d = ... musst du dann var d = ... schreiben.

Da hast Du absolut recht; ich schreibe meist sehr kurze Übungsprogramme, und da lasse ich das "var" rein aus Bequemlichkeit vielfach weg, bin aber auch schon darum "auf die Nase gefallen" - aber besser (für mich) ich gewöhne es mir an : )

Dein Skript dürfte eigentlich gar nicht funktionieren, da d1.style.opacity völlig invalid und unzulässig ist. Der einzige Grund, warum es trotzdem klappt (was es eigentlich nicht sollte), ist, dass mit jeder ID eine gleichlautende globale JS-Variable erstellt wird - wenn ich mich richtig erinnere, war das die Begründung; das hatten wir nämlich schonmal in einem anderen Thread...
Für den Zugriff auf ein Element mit einer ID ist beispielsweise document.getElementById() die korrekte Methode!

Lustig: habe bisher alle meine Skripte mit document.get … geschrieben, bis ich heute auf einen Skript stiess, in dem direkt «var a = d1.style.opacity;» (d1 ist die id) steht - keine Ahnung mehr, ob ich den wohl irgendwo so abgeschrieben hatte. Habe darauf sogar einen Skript für einen Ladebalken entsprechend umgeschrieben, da kürzer. Sollte ich das also besser meiden?
Funktionieren tut es ja, auch der Ladebalken, aber vielleicht kann es irgendwann mal Probleme damit geben? Hast mich also gerade rechtzeitig "gewarnt", hätte sonst genau ab heute alle meine Skripte neu so (um-)geschrieben. Ist mir eigentlich auch wohler mit document.get … - keine Ahnung warum.

Ich danke Dir vielmals,
Grüsslein, Gwunderi

 

[Melewo]

Habe für obigen Skript einen "Trick" ausprobiert; so kann man den Div auch dunkler machen:

Das ist doch aber so falsch, wie es falscher nicht mehr gehen kann, man kann mit style.opacity nichts heller oder dunkler machen, sondern man kann nur festlegen, wieviel noch vom Untergrund zu sehen ist.

Auch ein gutes Beispiel:

Mit der Eigenschaft opacity (engl. Deckkraft) lässt sich über den Alphakanal der Grad der Transparenz eines Elementes steuern.

CSS/Eigenschaften/Anzeige/opacity

 

[Gwunderi]

Das ist doch aber so falsch, wie es falscher nicht mehr gehen kann, man kann mit style.opacity nichts heller oder dunkler machen, sondern man kann nur festlegen, wieviel noch vom Untergrund zu sehen ist.

Komisch nur, dass es bei mir einwandfrei funktioniert - muss wohl an meinem magischen PC/Browser liegen, für den Wunder no Problem sind : )))

Wie Julian schon vorgeschlagen hat: probier's doch mal einfach aus?

 

[Melewo]

probier's doch mal einfach aus?

Hatte ich doch geschrieben, hatte es doch vor zwei Jahren schon ausprobiert. Oder hast Du Dir mein Beispiel nicht angesehen?

 

[j-l-n]

Hast mich also gerade rechtzeitig "gewarnt", hätte sonst genau ab heute alle meine Skripte neu so (um-)geschrieben. Ist mir eigentlich auch wohler mit document.get … - keine Ahnung warum.
Ich danke Dir vielmals

Gern geschehen.

man kann mit style.opacity nichts heller oder dunkler machen, sondern man kann nur festlegen, wieviel noch vom Untergrund zu sehen ist.

Melewo will darauf hinaus, dass opacity nicht die Helligkeit regelt, sondern die Transparenz. Allerdings weiß ich schon, wie du das meinst mit "heller": Wenn der background nämlich weiß ist, wird die Schrift logischerweise auch "heller", weil eben die Transparenz erhöht wird und sich so mit weiß (="hell") überlagert.

@Melewo: Ist das wohl deine Seite? Jetzt versteh ich nämlich auch den Satz, der war mir vorher nicht so ganz klar...

 

[Melewo]

Ist das wohl deine Seite? Dann versteh ich nämlich auch deinen Satz, der war nämlich nicht so ganz klar.

Ja, das ist eine meiner älteren Seiten und da fand ich es noch toll, Bezeichner von Funktionen durchgängig groß zu schreiben, was ich heute nicht mehr machen würde.

 

[Gwunderi]

Oder hast Du Dir mein Beispiel nicht angesehen?

Nein, hatte ihn mir nicht angesehen, da Du ihn ja zwei Minuten nach meiner Antwort als Zusatz gepostet hast : ) Aber jetzt verstehe ich auch, was Du meinst: opacity ist die Transparenz und nicht die Helligkeit, war mir schon klar, habe mich nur ungenau ausgedrückt, tschuldigung.

@Julian
Habe wohl des Rätsels Lösung:
Habe bei einem Ladebalken die Breite schrittweise um 0.1px oder 0.5px erhöhen wollen, und das geht auch nicht. Anscheinend macht der Browser bei opacity (und hier nur bei Minuswerten) eine Ausnahme, da vielfach verwendet?

Unten der Code für den Ladebalken; wenn man hier «w = w + 0.5» schreibt, funktioniert es auch nicht. Nimmt offenbar nur ganzzahlige Werte an.
Apropos: ist nun dieser Code einwandfrei? : )))

function breiter()
{var eng = document.getElementById("d1");
var w = parseInt(eng.style.width);
w = w + 1;
eng.style.width = w + "px";
if (w < 300)
	{setTimeout(breiter, 10);}}
</script>

 

[Melewo]

Habe bei einem Ladebalken die Breite schrittweise um 0.1px oder 0.5px erhöhen wollen, und das geht auch nicht.

Dein Screen kennt keine 0.1px oder 0.5px, Dein Bildbearbeitungsprogramm auch nicht. Ein Pixel ist immer ein Pixel, der nur verschiedene Farb- und Helligkeitswerte annehmen kann. Lediglich bei Retina-Displays versucht man da etwas zu tricksen, in dem in mehr Pixel aufgelöst wird, als das Auge erfassen kann und einige Werte dann wohl auch noch verdreht. Doch im Normalfall kann es keine 0.1 Pixel geben.

 

[kkapsner]

Vergleiche diese Zeile

var w = parseInt(eng.style.width);

mal mit der Zuweisungszeile für d oben. Siehst du einen Unterschied?

PS: bei parseInt() ist man auf der sichereren Seite, wenn man die Basis der Zahl mit angibt.
PPS: es heitß "onmouseup"

@Malewo: die Schreibweise des Funktionsnamens ist wirklich das kleinste Problem bei deinem Skript... ein globaler (tztztz) Zähler mit komplett unaussagekräftigem Namen, String als Parameter für window.setTimeout(), inkonsistenter Codestil, seltsame Programmierlogik (zuerst den Timeout setzen und dann erst prüfen, ob man ihn wirklich haben will) ...

 

[Gwunderi]

Dein Screen kennt keine 0.1px oder 0.5px, Dein Bildbearbeitungsprogramm auch nicht. Ein Pixel ist immer ein Pixel, der nur verschiedene Farb- und Helligkeitswerte annehmen kann. … Doch im Normalfall kann es keine 0.1 Pixel geben.

Och, na klar, logisch …

Edit: Kommt mir gerade in den Sinn: aber wenn ich z.B. eine Randbreite 0.5px angebe, wird sie sichtlich dünner als bei 1px (0.1 oder 0.7 etc. nimmt es hingegen schon gar nicht an).

Vergleiche diese Zeile mal mit der Zuweisungszeile für d oben. Siehst du einen Unterschied?

Sehe manche Unterschiede, weiss nicht recht, auf was Du hinaus willst. Meinst Du das parseInt()? Oder die nicht globale Variable? oder was genau?

PS: bei parseInt() ist man auf der sichereren Seite, wenn man die Basis der Zahl mit angibt.

Verstehe das so, dass parseInt() bei der Breite z.B. relevant ist, da es aus 10px eine ganze Zahl (10) macht. Ist es richtig zu sagen, dass es aus einem String (10px) einen Integer (ganze Zahl) macht?
Aber bei opacity:0.5 ist doch das 0.5 kein String, sondern nur eine Zahl (Float) - wenn ich da parseInt() anwende, verändert es doch deren Wert.

Was meinst Du denn mit "Basis der Zahl"?

 

[kkapsner]

Ich meine das parseInt() (bzw. hier brauchst du dann parseFloat()). Bei NODE.style.opacity kommt da genauso ein String zurück, den du zuerst in eine Zahl umwandeln musst. Sonst wird bei dem "+" aus den "0.1" schnell mal "0.10.1".

PS: Als Basis meine ich die Basis des Zahlensystem, in dem die Zahl angegeben wurde. Als binär oder dezimal oder hecadezimal oder... hier einfach parseInt(meinString, 10);...

 

[Melewo]

ein globaler (tztztz) Zähler mit komplett unaussagekräftigem Namen,

Würde ich heute nicht mehr so in einer Seite machen, in der noch weitere Scripts eingebunden werden, die ich nicht kenne.

String als Parameter für window.setTimeout(),

Haben die Beispiele bei selhtml ebenfalls, scheint somit nicht wirklich verkehrt zu sein:

window.setTimeout("Hinweis()", 10000);
SELFHTML: JavaScript / Objektreferenz / window

aktiv = window.setTimeout("Zaehlen()", 1000);
SELFHTML: JavaScript / Objektreferenz / window

inkonsistenter Codestil,

Meine ersten PHP-Scripts sahen noch etwas schlimmer aus, die mag ich kaum noch jemanden zeigen, geht aber vielleicht mehr oder weniger allen so.

seltsame Programmierlogik (zuerst den Timeout setzen und dann erst prüfen, ob man ihn wirklich haben will) ...

Gut, habe es gerade mal etwas anders probiert.

Unten der Code für den Ladebalken;

Als Demo für einen Ladebalken:

<!doctype html>
<html>
<head>
<title>Testseite</title>
<style type="text/css">
body {background-color:#ccc}
h1   {text-align:center}
div#ladebalken  {height:20px; width:320px; border:1px solid red; margin:auto}
div#fortschritt {height:20px; width:1px; background-color:#dddd00; border:none}
</style>
</head>

<body>
<h1>Lade einen Balken</h1>
<div id="ladebalken">
    <div id="fortschritt"></div>
</div>
<script>
"use strict";
var fuer_pixel = 1;

if (window.addEventListener) {
    window.addEventListener("load", ladeBalken, false);
}
function ladeBalken() {
    fuer_pixel++;
    var eng = document.getElementById("fortschritt");

    if (fuer_pixel < 320) {
        window.setTimeout("ladeBalken()", 90);
        eng.style.width = fuer_pixel + "px";
    }
}

</script>
</body>
</html>

 

[Gwunderi]

Ich meine das parseInt() (bzw. hier brauchst du dann parseFloat()). Bei NODE.style.opacity kommt da genauso ein String zurück, den du zuerst in eine Zahl umwandeln musst. Sonst wird bei dem "+" aus den "0.1" schnell mal "0.10.1".

Aha - es geht !!! parseFloat() ist tatsächlich die Lösung!

Hier mein Skript:

<script>
function dark()
{var box = document.getElementById("d2");
transp = parseFloat(box.style.opacity);
transp = transp + 0.1;
box.style.opacity = transp;
setTimeout(dark, 200);}
</script>

Wusste erstens nicht, dass es parseFloat() überhaupt gibt, und v.a. dachte ich nicht, dass bei opacity:0.1 beispielsweise das 0.1 ein String ist (und dass der Browser demnach aus dem + 0.1 ein 0.10.1 macht).

Vielen herzlichen Dank!
Grüsslein, Gwunderi