• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme bei opacity

T

TheSorm

Neues Mitglied
Code: 
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:

Code: 
#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 ?
 
Werbung:
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.
 
Werbung:
ok hab mich ein wenig in jQuery eingelsen jetzt habe ich folgendes Problem:
HTML:
Code: 
<head>
    <title>TSV Elstorf</title>
    <meta charset="utf-8"/>
    <script src="js/Anpassungen.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/Menue.js"></script>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
</head>

<body>
<div id="wrapper">
  <nav class="menu">
     <ul id="navi">
       <li id="m2">
         <a href="Home">Home</a>         </li>
       <li>
         <a href="Weiterer Link" >Weiterer Link</a>         </li>
       <li>
         <a href="Weiterer Link" >Weiterer Link</a>         </li>
     </ul>
  </nav>
</div>

js:
Code: 
$(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 ?
 
Wenn Du mit jQuery eine ID ansprechen willst, musst Du das in der CSS-Schreibweise tun. Also:

Code: 
$("#m2")
 
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?
 
Werbung:
Werbung:
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben