✔ mein fadeIn skript für text geht nicht und ich weiss nicht wieso

D

DH_Vie

Grünschnabel
Hi alle zusammen

Für eine website die ich designen möchte war es nötig beim laden einer seite text einblenden zu lassen. Um dies zu erreichen habe ich ein Skript geschireben, nun ist das problem das ich absolut keine ahnung habe warum das nicht functionniert und ich folgenden error bekomme:

Code: 
Error: document.getElementById(CurrentLine) has no properties
Line: 14

der sourcecode der test site sieht so aus:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

      <script language="JavaScript" type="text/javascript">

             var hex=255;
             var i=1;
             var CurrentLine=("line"+i);

            function fadetext(){
                       if(hex>0) {
                       hex-=11;
                       document.getElementById(CurrentLine).style.color="rgb("+hex+","+hex+","+hex+")";
                       setTimeout(fadetext(),200);
                      }
                      else{
                      hex=255;
                      i++;
                      CurrentLine=("line"+i);
                      fadetext();
                      }
              }

      </script>

</head>

<body onLoad="fadetext();">

<div id="line1">Line 1 Test</div>
<div id="line2">Line 2 Test</div>

</body>

</html>

das if-statment soll hier bewirken, das "line2" eingeblendet wird nachdem "line1" eingeblendet wurde.

Danke im Voraus für die Hilfe

DH_Vie
 
Diese Zeile ändern:
Code: 
var CurrentLine=("line"+i);
in diese:
Code: 
var CurrentLine="line"+i;
solange diese Zuweisung aber nicht in der Funktion steht wird immer nur "line1" angesprochen werden, denn "var CurrentLine="line"+i;" wird nur ein einziges mal ausgeführt, nämich am Anfang, wenn gerade i=1 ist.

Außerdem ist das kein fade-in-Script, denn du bewegst nichts, sondern veränderst nur die Farbe sukkzesiv.

Und selbst wenn die Zuweisung in der Funktion an der richtigen Stelle stünde, sähe es komisch aus, weil die einzelnen <div>-Tags nicht gleichzeitig sondern nacheinander die Farbe ändern würden und sie das zudem noch sehr schnell tun würden.
 
Zuletzt bearbeitet:
danke für die schnelle antwort.

mit fadeIn meinte ich eigentlich eh mehr ein skript das langsam den text erscheinen lässt.
Die farbe wird von weiß (welches auch meine hintergrund farbe ist) zu schwarz geändert, das ergibt den gleichen effekt als würde man einfach die tranzparenz ändern. Der grund warum ich nicht die Opacity style attirbute verwendet habe ist weil ich dann für Mozilla und IE 2 verscheidene cods schreiben müsste und es so auch geht.

Es könnte sein das ich mich vorher falsch ausgedrückt habe, aber ich will in der tat das die 2te line erst nach der ersten eingeblendet wird.

Also so wie ich dass verstehe was ich geschrieben habe:
ich initialisiere CurrentLine ="line1" und i=1 am anfang des Skripts.
dann wenn wird die fadetext funktion geladen die dann line1 langsam von weiss zu schwarz ändern sollte. Wenn line1 dann schwarz ist trifft das else ein welches dann currentline auf "line2" setzt und die fadetext funktion nochmal macht, nur diesmal ist i und Currentline eben 2 und line2 statt 1 und line1.

DH_Vie
 
Sorry, mein PC hat grade gestreikt, sonst hätte ich schon früher geantwortet. Hab jetzt nicht getestet, aber so müsste es gehen:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head><title>Untitled</title><meta name="AUTHOR" content="con-f-use@gmx.net" /><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
 <script type="text/javascript"><!--
 var hex=255, i=1, CurrentLine="line"+i;
 
 function fadetext(){
 	if ( obj = document.getElementById(CurrentLine) ) {
 		if(hex>0) {
 			hex-=11;
 			obj.style.color='rgb('+hex+','+hex+','+hex+')';
 			setTimeout('fadetext()',200);
 		} else {
 			hex=255;
 			CurrentLine="line"+ (++i);
 			fadetext();
 		}
 	}
 }
 
 </script>
 
 </head><body onLoad="fadetext();">
 
 <div id="line1" style="color:white;">Line 1 Test</div>
 <div id="line2" style="color:white;">Line 2 Test</div>
 
 </body></html>
Du hattest zusätzlich noch die Anführungszeichen im setTimeout vergessen und das abfangen des Fehlers, der auftritt, sobald i größer wird, als die Anzahl der div-Tags.
 
Stimmt jetzt gehts! danke!

Jetzt muss ich nurnoch verstehen was der fundamentale Fehler in meinem Skript war :confused:

Danke

DH_Vie
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück