[FRAGE] Mehrere DIV`s zeitlich ein- und ausblenden

[runggi]

Hallo liebe Community!
Ich stehe zur Zeit ganz schön auf der Leitung und bräuchte eine zündende Idee. Kennt von euch jemand einen Ansatz oder Lösung zu folgenden Problem:
Ich möchte gerne von mehreren div`s in einer zeitlichen Abfolge die Farbe tauschen. Also angenommen innerhalb von 3 Minuten sollen 20 verschiedene div's zu einer bestimmten Zeit, eine bestimmte Zeit lang eine andere Farbe erhalten.
Beispiel:
Das rote DIV1 soll z.B. bei 30 Sekunden, 1 Minute und 1,25 Minuten für 0,5 oder 1 Sekunden die Farbe blau bekommen usw. Also die DIV`s werden innerhalb der fiktiven 3 Minuten auch öfters angesprochen. Im Endeffekt soll das ganze dann in dieser zeitlichen Abfolge (wie ein „Film“) ablaufen.

Ich kenne mich mit Javascript schon aus – aber dazu fehlt mir jeglicher Anhaltspunkt. Ich würde mich auf eine Idee sehr freuen.

PS: Google befrage ich (erfolglos) schon 2 Tage.

 

[ToM80]

Nabend,

wenn ich dich richtig verstanden habe, dann geht es dir nur um die Zeitfunktion, korrekt? Die Farbe eines DIVs zu ändern dürfte dir ja an sich geläufig sein.
Du brauchst dafür eigentlich nur noch Window setTimeout() Method oder auch JavaScript for Loop

Grüße

ToM80

 

[runggi]

Nabend,

wenn ich dich richtig verstanden habe, dann geht es dir nur um die Zeitfunktion, korrekt? Die Farbe eines DIVs zu ändern dürfte dir ja an sich geläufig sein.
Du brauchst dafür eigentlich nur noch Window setTimeout() Method oder auch JavaScript for Loop

Grüße

ToM80

Ja – schon ein guter Ansatz. Aber das ganze ist schon noch komplizierter. Brechen wir es auf ein Div runter.
Bei der Zeitangabe habe ich noch das Problem setTimeout(). Schön wäre zu „sagen“ z.b. werde nach x Sekunden für x Sekunden blau:

DIV1 soll nach 30 Sekunden für 1 Sekunden die Farbe wechseln und nach 32 Sekunden für 2 Sekunde die Farbe wechseln usw.
Also im array DIV1 (30s/1s, 32s/2s, 40s/1s, 48s/300ms).

Genau da happerst :-(

 

[Sempervivum]

Dann brauchst Du eben zwei Timeouts pro Div, etwa so:

window.setTimeout(function() {
    // Farbwechsel
    window.setTimeout(function() {
        //Farbwechsel zurück
    }, 1000);
}, 30000);

Oder soll sich das Ganze unendlich wiederholen? Dann müsstest Du das Ganze rekursiv anlegen.
Und wenn die Parameter in einem Array liegen, würde ich dir empfehlen, die Timer in einer Schleife zu generieren.