Div einblenden funktioniert, ausblenden nicht !

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo !

Ich bin echt keine große Javascript leuchte und bin auch froh das ich es soweit geschafft habe aber jetzt brauche ich eure Hilfe! (Hoffe keiner postet, ich soll dannach google oder so, hab alles versucht aber nix hilft)

Also Folgendes (hier ist das Problem: http://thedjs.de/robs-text-slide/ )

Also ich habe 3 Div Tags der classe nexttext die alle im divtag mit der id textslideContainer sind. Ich möchte alle nacheinandere ein- und ausblenden. 1.einblenden 1.ausblenden 2.einblenden 2.ausblenden 3.einblenden 3.ausblenden … ok prinzip ist nun klar. (Textslideshow halt).Wichtig ist ein softer übergang. also keinde hidden und visible dinger.
Einblenden funktioniert soweit… aber das ausblenden nicht. Ich zeig mal den code:

CSS-Code

.nexttext{
 position:absolute;
 display:block;
 top:0;
 left:0;
 /\*visibility:hidden;\*/
 opacity: 0; 
 filter:alpha(opacity=0); 
}
#textslideContainer{
 position:relative;
 height:20px;
 width:auto;
}

javascript code

// Diese Funktion ist für die schrittweise Einblendung zuständig 
// Ausgeblendet wird dann wenn die sichtbarkeit 100% beträgt, sonst wird eingeblendet
function showHideText(num){
 var texts = document.getElementById("textslideContainer").getElementsByTagName('div');
 if(texts.item(num).style.opacity == 1){
 for(var outt = 100; outt \>= 0;outt--){
 setTimeout("setOpacity("+num+","+outt+")",10\*outt); 
 }
 //texts.item(num).style.opacity = 0;
 //texts.item(num).style.filter = 'alpha(opacity='+0+')';
 }else{
 for(var inn = 0; inn \< 101; inn++){
 setTimeout("setOpacity("+num+","+inn+")",10\*inn);
 }
 }
}

// Diese Funktions bekommt die Nr. des objektes und die stärke der sichbarkeit
function setOpacity(numr,value) {
 var texts = document.getElementById("textslideContainer").getElementsByTagName('div');
 texts.item(numr).style.opacity = value/100;
 texts.item(numr).style.filter = 'alpha(opacity='+value+')';
}

// Schaltet durch die Objekte durch und gibt jedem den befehl zu erscheinen und zu verscheinden. 
function nexttext(){
 var texts = document.getElementById("textslideContainer").getElementsByTagName('div');

 if (typeof(zaehler) != "number") {
 zaehler= -1;
 }

 zaehler++;

 if (zaehler \<= texts.length-1) {
 showHideText(zaehler);
 setTimeout("showHideText("+zaehler+")", 5000);
 setTimeout("nexttext()",5000);
 } else {
 zaehler = -1;
 setTimeout("nexttext()",10);
 } 

}
#2

Hey critak,
Das ist wohl nur ein kleiner Denkfehler:

function showHideText(num){
 var texts = document.getElementById("textslideContainer").getElementsByTagName('div');
 if(texts.item(num).style.opacity == 1){
 for(var outt = 100; outt \>= 0;outt--){
 // Alt:
 // setTimeout("setOpacity("+num+","+outt+")",10\*outt); 
 // Neu:
 setTimeout("setOpacity("+num+","+outt+")",10\*(100-outt)); 
 }
 }
...

Ich glaube aber, dass der alpha-Filter nur im IE funktioniert.
style.opacity müsste aber standard-konform sein.

Gruß
VoidZer0

#3

Danke !!! Es funktioniert … endlich :wink: hab echt 2 Tage dran gesessen (scheiss copy-&-paste ^^ wenn man zu faul ist 2 mal ähnlichen Code zu schreiben wa)

Also ich habs nur im Firefox versucht und da funktioniert es. Hoffe ich bekomme es noch IE tauglich.

also VoidZer0 , Vielen Dank !!!

#4

Freut micht! Gern geschehen =)
Im Internet Explorer müsste es erst recht laufen.
Aber schmeiß lieber dieses:

 texts.item(numr).style.filter = 'alpha(opacity='+value+')';

komlett raus!
Sonst machen evtl. andere Browser-Probleme, weil das kein Standard ist!
http://www.jjam.de/JavaScript/Grafik_Effekte/Fading…
Interpetiert wird das vom Firefox jedenfalls nicht.
Firefox ist nur nett, dass er dein Script ohne Fehlermeldung schluckt.

Und bedenke, dass deine Implementation noch einige Schwächen hat.
Merkst du z.B. wenn du 2mal auf start klickst.
Es gibt auch keine Garantie, dass die Timeouts wirklich nacheinander ausgeführt werden.
Starte lieber erst den nächsten Timeout, wenn der alte auch wirklich abgelaufen ist
und bei eine Prüfung ein, die sicherstellt, dass die Ausführungsreihenfolge auch stimmt.

Gruß
VoidZer0