Probleme bei opacity

html.de-Forum JavaScript
1 
function fadeout()
  {
  var alt = 1;
  if(document.getElementById("wrapper").style.opacity.localeCompare('0'))
  {
  alt = parseFloat(document.getElementById("wrapper").style.opacity);
  neu = alt - 0.1;
  console.log(neu);
  document.getElementById("wrapper").style.opacity = neu;
  window.setTimeout("fadeout()",1000);
  }
  }

Das Probme was ich habe ist das : document.getElementById(„wrapper“).style.opacity immer nur einen leeren string zurück giebt obwohl ich im css opacity definiert habe:

#wrapper { background: url("images/Bild.jpg") no-repeat scroll 50% 0%; background-height: 800px; background:-width: auto; height: 800px; opacity: 1.0; }

könntet ihr mir da helfen ?

2

Würde zu jQuery raten da du sonst mehrere Browser berücksichtigen musst…

3

Der bisher nicht erwähnte Grund ist, dass per CSS-Klasse definierte Eigenschaften o.g. JavaScript-Kommando nicht zur Verfügung stehen. Hierbei handelt es sich um computed styles, wofür es auch extra JavaScript-Kommandos gibt. Siehe:
https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle

Beachte jedoch, dass diese wie schon angedeutet bei jedem Browser anders ermittelt werden müssen, wodurch für dich der Aufwand leicht steigt. Du hast daher folgende Lösungsmöglichkeiten:
a) Du setzt die Eigenschaft per Style-Attribut im HTML-Code. Dann steht sie auch dem von dir verwendeten Kommando zur Verfügung.
b) Du ermittelst wie von mir beschrieben den computed style.
c) Du nutzt jQuery oder andere Hilfsmittel, die dir den computed style zuverlässig ausgeben.

4

ok hab mich ein wenig in jQuery eingelsen jetzt habe ich folgendes Problem:
HTML:

[CODE]
TSV Elstorf




[/CODE]

js:

$(document).ready(function(){ $("m2").mouseenter(function(){ alert("You entered m2!"); $("#wrapper").fadeOut(3000); }); });

Das Problem ist das ganichts passiert. Ich ghe mit der Maus über das Objekt m2 aber es fadet weder aus noch das der alert ausgelöst wird ?

5

Wenn Du mit jQuery eine ID ansprechen willst, musst Du das in der CSS-Schreibweise tun. Also:

$("#m2")
6

ok super klappt war ein dummer fehler hab ich einfach übersehen, ich möchte jetzt das das wrapper ausgefadet wird, wrapper hat nur ein hintergrundbild, aber das Menü soll weiter angezeigt werden. Geht das?

7

Dafür liefert jQuery fadeOut() du kannst hier auch bequem die Dauer der Animation einstellen…

http://api.jquery.com/fadeout/

8

ist zwar keine lösung aber trz danke habs selbst hinbekommen :slight_smile:

9

Achso weil Wrapper das elternelemt von Menü ist oder?

10

ja genau hab das jetzt aber so gelöst das wrapper unter dem menü ist also nicht mehr perent und mit mergin-top nach oben verschoben ist