[ERLEDIGT] Fade function funktioniert nicht

[mobby]

Hey,

ich habe ein Fade Tutorial nachgebaut ... aber irgendwie funktioniert es nicht. Kann mir wer auf die Spruenge helfen? Danke!

 function fade(step) 
 {
  var imgs = document.getElementByID("img");
  
  step = setp || 0;
  
  imgs[1].style.opacity = step/100;
  imgs[1].style.filter = "alpha(opacity=" + step + ")"; //IE
  
  step = step + 2;
  
  if (step <= 100)
  {
   window.setTimeout(function () {
    fade(step); }, 1);
  }
 }

<p style="position:relative;">
 <img class="img" src="header_wechsel_imgs/1.png">
 <img class="img" src="header_wechsel_imgs/2.png" style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0);">
</p>
<p><a href="javascript:fade()">Überblenden</a></p>

 

[Tronjer]

Funktioniert nicht ist keine Fehlerbeschreibung. Was sagt die Konsole?

 

[scbawik]

step = setp || 0;

Mit der Konsole hättest das selbst gefunden.

 

[mobby]

Ah ja sorry, hab ich übersehen und an die Konsole hab ich garnicht mehr gedacht ... Allerdings funktioniert es immer noch nicht. Ein Fehler war: Ich hab nach ElementById gesucht und hab die Images aber mit class="" benannt und nicht mit id="" ... das hab ich verbessert. Jetzt sagt er aber noch folgendes:

[18:51:02.075] TypeError: imgs[1] is undefined

 

[Tronjer]

imgs[1] beschreibt das zweite Element im Array imgs. Wenn du ein 'undefined' erhältst, existiert kein zweites Element in diesem Array.

Gib mal in der Firebug-Konsole imgs[0] und imgs[1] ein, und schau dir die Antworten an.

 

[mobby]

Habs hinbekommen. Anstatt getElementById() hab ich getElementsByClassName() verwendet und den imgs' class="img" gegeben. Jetzt funktioniert der fade 1a. Allerdings gibt er in der Konsole immer noch "imgs[1] imgs is not defined" aus aber wayne, es funzt ja :)

 

[mobby]

Okay, jetzt wirds heavy: Ich hab das ganze Tutorial durchgearbeitet und alles bei mir eingebettet. Hier könnt Ihr euch das Ganze live anschauen: klick mich Jetzt hab ich folgende zwei Probleme: 1. Wenn man ein bisschen rein oder raus zoomt sieht man, dass kurz nach dem Fade das Bild immer so komisch nachrückt ... woran kann das liegen und wie bekomm ich es weg?! ^^ 2. Mit diesem script startet der erste Fade direkt nach Seitenaufruf ... jetzt fänd ich es aber schöner, wenn das erste Bild genau so lang stehen bleibt wie die anderen und der erste wirkliche Fade auch erst nach 2 Sekunden abläuft. Das Ganze beim ersten Aufrufen also um 2 Sekunden versetzt ist. Kein Plan was dazu an Klarcode benötigt wird ... ist zu viel zum Posten da schmiert der Editor hier ab ... //edit: ... Editor schmiert grad die ganze Zeit ab ... Code trag ich nach!

 

[scbawik]

Also du verwendest in deiner fade()-Funktion ein setTimeout und weißt jetzt nicht wie man etwas verzögert, hab' ich dich richtig verstanden?

Da hast du also viel vom Tutorial verstanden

Bei dem anderen Problem kann ich nicht helfen, da das Bild total verzerrt ist und somit bei mir nicht so aussieht wie vielleicht bei dir. Ein 'Nachrücken' kann ich zumindest im Safari nicht nachvollziehen.

 

[Tronjer]

Also bei mir sieht es im FF ordentlich aus, während es im Safari zerschossen ist.

Was den zweiten Teil deiner Frage betrifft: Du könntest z.B. den Aufruf FaderFramework.start() in ein setTimeout 2000 verpacken. Oder dir ein Plugin suchen, dem man in den Optionen bereits ein delay mitgeben kann.

 

[mobby]

Hm das mit dem zerschossenen Bild muss ich mir mal anschauen ... könnte an % Breite liegen ... dann müsste ich das komplette layout zwar wieder fix machen aber okay mal schaun. Zum tutorial ... jaaaa is schon recht komplex aber stimmt ... eigentlich simpel das ganze Ding nochmal in ein setTimeout setzen ... oh man ^^

Auf jeden Fall danke! Ich update dann noch mal mit fester Breite.

Sent from my GT-I9500 using Tapatalk 2

 

[mobby]

Also kleiner Nachtrag:

1. Das mit dem zerschossenen Bild bzw. dem komischen Nachruecken ... absolut keine Ahnung woher das kommt. Im IE ist es z.B. nicht, nur im FF und auch nur wenn man etwas rumzoomt, naja komisch. (Hat aber doch nichts mit der % Breite zu tun, auch bei fester Breite macht es den Schmu)

2. Das mit dem Delay war doch nicht so einfach wie gedacht, wenn ich faderframework.start() in ein setTimeout setze macht er nichts mehr ... ich muss das wohl irgendwo tiefer einbauen. Aber kein Plan und jaaaaa ich hab zwar das Tutorial durchgearbeitet aber das ist mein zweiter Tag mit JS daher blick ich noch nicht wirklich wo ich da ansetzen muss :(

 

[mobby]

Problem geloest, hab den Delay mit 8 Sekunden hinbekommen:

    start: function () {
        this.oldWinOnLoad = window.onload;

        window.onload = function () {
            if (typeof(FaderFramework.oldWinOnLoad) == "function") {
                FaderFramework.oldWinOnLoad();
            }
            setTimeout("FaderFramework.onload()",8000);
        }
    },