Fadeout script mit set_timeout

[Martin Ch.]

Hi

Ich würde gerne bei MouseOut einen Farbfadeout starten. Habe dafür folgende funktion erstellt:

function fadeout(id) {
window.setTimeout("document.getElementById(id).style.backgroundColor='#FFFFFF'", 10);
window.setTimeout("document.getElementById(id).style.backgroundColor='#AA1F95'", 20);
window.setTimeout("document.getElementById(id).style.backgroundColor='#D694CC'", 30);
window.setTimeout("document.getElementById(id).style.backgroundColor='#BB4CAA'", 40);
window.setTimeout("document.getElementById(id).style.backgroundColor='#AA1F95'", 50);
};

und rufe das ganze z.B. für das Element mit der id "01" so auf:

onMouseOut="fadeout('01');"

leider funktioniert das ganze aber nicht..
habt ihr eine Idee was ich falsch mache?

danke!
gruß, martin

[Der Martin]

Hi lieber Namensvetter,

Ich würde gerne bei MouseOut einen Farbfadeout starten. Habe dafür folgende funktion erstellt:
function fadeout(id) {
window.setTimeout("document.getElementById(id).style.backgroundColor='#FFFFFF'", 10);
window.setTimeout("document.getElementById(id).style.backgroundColor='#AA1F95'", 20);
window.setTimeout("document.getElementById(id).style.backgroundColor='#D694CC'", 30);
window.setTimeout("document.getElementById(id).style.backgroundColor='#BB4CAA'", 40);
window.setTimeout("document.getElementById(id).style.backgroundColor='#AA1F95'", 50);
};

damit stellst du quasi mehrere Timeouts in die Warteschlange. Ob das so überhaupt möglich ist, weiß ich nicht. Ich schlage vor, dass du immer nur *einen* Aufruf von setTimeout() machst, der den aktuellen Farbwert einstellt und den jeweils nächsten Schritt *erst dann* über einen erneuten Aufruf von setTimeout() anfordert.

und rufe das ganze z.B. für das Element mit der id "01" so auf:
onMouseOut="fadeout('01');"

Auch wenn's möglicherweise funktioniert - eine ID muss mit einem Buchstaben beginnen, nicht mit einer Ziffer.

Ciao,
 Martin

[Patrick Andrieu]

Hallo Martin!

damit stellst du quasi mehrere Timeouts in die Warteschlange. Ob das so überhaupt möglich ist, weiß ich nicht.

Das geht:

function jetzt_reichts() {
  clearTimeout(stopall);
  setTimeout("kf1.style.left = (fb-600)/2; + 'px';kf1.style.top = (fh-500)/2 + 'px';", 50);
  setTimeout("kf2.style.left = (fb-400)/2; + 'px';kf2.style.top = (fh-500)/2 + 'px';", 110);
  setTimeout("kf3.style.left = (fb-200)/2; + 'px';kf3.style.top = (fh-500)/2 + 'px';", 170);
  setTimeout("kf4.style.left = fb/2; + 'px';kf4.style.top = (fh-500)/2 + 'px';", 230);
  setTimeout("kf5.style.left = (fb+200)/2; + 'px';kf5.style.top = (fh-500)/2 + 'px';", 290);
  setTimeout("kf6.style.left = (fb+400)/2; + 'px';kf6.style.top = (fh-500)/2 + 'px';", 350);
  setTimeout("kf7.style.left = (fb-400)/2; + 'px';kf7.style.top = (fh+300)/2 + 'px';", 410);
  setTimeout("kf8.style.left = (fb-200)/2; + 'px';kf8.style.top = (fh+300)/2 + 'px';", 470);
  setTimeout("kf9.style.left = fb/2; + 'px';kf9.style.top = (fh+300)/2 + 'px';", 530);
  setTimeout("kf10.style.left = (fb+200)/2; + 'px';kf10.style.top = (fh+300)/2 + 'px';", 590);
  setTimeout(mitte, 1000);
}

(aus meiner Startseite, Teil dessen, was Cheatah letztens als Geflubber bezeichnete *g*)

Auch wenn's möglicherweise funktioniert - eine ID muss mit einem Buchstaben beginnen, nicht mit einer Ziffer.

Das stimmt.

Viele Grüße aus Frankfurt/Main,
Patrick

[JürgenB]

Hallo Martin,

window.setTimeout("document.getElementById(id).style.backgroundColor='#FFFFFF'", 10);

...

der zweite Parameter gibt die Verzögerungszeit in Millisekunden an. Willst Du den Fadeout wirklich in 50 ms durchführen?

onMouseOut="fadeout('01');"

IDs dürfen nicht mit einer Zahl anfangen.

Gruß, Jürgen

[molily]

Hallo,

function fadeout(id) {
window.setTimeout("document.getElementById(id).style.backgroundColor='#FFFFFF'", 10);

onMouseOut="fadeout('01');"

Die Variable id ist eine lokale in der Funktion fadeout und steht dem verzögert aufgerufenen Code nicht zur Verfügung.

Du könntest sie zu einer globalen Variable machen, aber genauso gut könntest du mit Closures arbeiten, um die Informationen aus der Fadeout-Funktion an den Code weiterzugeben, der verzögert aufgerufen werden soll.

Beispiel:

function fadeout (param) {  
 // Beim ersten Aufruf ist der Parameter ein String  
 if (typeof param == "string") {  
  // Lege ein Object an mit dem aktuellen Schritt und einer Referenz auf das Element  
  var obj = {  
   "schritt" : 0,  
   "elem" : document.getElementById(param)  
  };  
 } else {  
  // Bei den Folgeaufrufen ist der erste Parameter bereits das Object  
  obj = param;  
 }  
 // Ändere Hintergrundfarbe  
 obj.elem.style.backgroundColor = fadeout.schritte[obj.schritt];  
 // Erhöhe den Schrittzähler  
 obj.schritt++;  
 var closure = function () {  
  // Die Closure schließt obj ein  
  fadeout(obj);  
 };  
 if (obj.schritt < fadeout.schritte.length) {  
  // Rufe fadeout erneut verzögert auf, gekapselt in eine Closure  
  obj.elem.timeout = window.setTimeout(closure, 200);  
 }  
}  
fadeout.schritte = ["#FFFFFF", "#D694CC", "#BB4CAA", "#AA1F95"];

<p onmouseover="this.style.backgroundColor = 'white';" onmouseout="fadeout('a1');" id="a1">test</p>

Es gibt hier nur eine Funktion, die sich immer wieder selbst verzögert aufruft (wie Martin auch geraten hat). Sie ruft sich so oft auf, wie Einträge im Array schritte sind, der die Farbcodes enthält.

Am Anfang übergibt man der Funktion eine ID, sie legt dann ein Object an, in dem der aktuelle Schritt und eine Referenz auf das Element gespeichert werden. Dieses Object ist nicht unbedingt nötig, man könnte es auch ohne lösen, aber es bietet die Möglichkeit, alle relevanten Daten zum laufenden Fadeout in einem Objekt zu speichern.

Es wird eine Closure (verschachtelte Funktion) angelegt, in dessen Funktionskörper man Zugriff auf dieses Object hat. Darin wird fadeout mit dem Object aufgerufen, das die Infos zum gegenwärtig laufenden Fadeout enthält. Dieses Funktionsobjekt wird dann setTimeout übergeben.

Auf diese Weise wird fadeout immer wieder aufgerufen und bekommt ein Object mit dem gegenwärtigen Status des Fadeouts als Parameter.

(Sieht vielleicht auf den ersten Blick tausendmal komplizierter aus, aber das sehe ich als fortgeschrittenen Programmierstil, an den man sich ohnehin herantasten sollte.)

Mathias

[Patrick Andrieu]

Hallo Mathias!

mit Closures arbeiten,

Ließe sich mit diesen closures auch das bewerkstelligen, was ich da versuche zu erreichen (Im Beitrag ab: "Was ich versuchte zu erreichen ist folgendes:" beschrieben)? Ich werde mir den Artikel, den ich schon gebookmarkt hatte, die Tage eh näher ansehen.

Viele Grüße aus Frankfurt/Main,
Patrick

[Martin Ch.]

Hey!

Vielen Dank für Eure Hilfe, mit dem Closures Script funktioniert das ganze wunderbar!

Ich Danke Euch!

Gruß,
martin