Hallo zusammen,
ich weis mir irgendwie nicht zu helfen, weshalb ich mich an euch wenden muss.
Ich möchte im oberen Bereich einer Webseite (Intranet) zwei Legenden darstellen. Diese Legende sagt zum einen aus, welche Farbe für was steht für Tickets. Und die zweite Legende sagt welche Farbe für was steht für Projekte.
<div id="legendeoffen">
<h4 style="color:white;">Ticket-Ablaufzeit:</h4>
<span style="color:green">Grün: 1-3 Tage - Liegt im Zeitrahmen</span> |
<span style="color:orange">Orange: 3-7 Tage - Sollte bald beendet werden</span> |
<span style="color:red">Rot: Älter als 7 Tage - Sollte bereits beendet sein!</span>
<h4 style="color:white;">Projekt-Ablaufzeit:</h4>
<span style="color:green">Grün: 1-90 Tage - Liegt im Zeitrahmen</span> |
<span style="color:orange">Orange: 90-150 Tage - Sollte bald beendet werden</span> |
<span style="color:red">Rot: Älter 150 Tage - Sollte bereits beendet sein!</span>
</div>
Alles anzeigen
Ich möchte nun daraus etwas animiertes Basteln.
Und zwar soll zuerst die eine Legende angezeigt werden:
<div id="legendeoffen1">
<h4 style="color:white;">Ticket-Ablaufzeit:</h4>
<span style="color:green">Grün: 1-3 Tage - Liegt im Zeitrahmen</span> |
<span style="color:orange">Orange: 3-7 Tage - Sollte bald beendet werden</span> |
<span style="color:red">Rot: Älter als 7 Tage - Sollte bereits beendet sein!</span>
</div>
und anschließend die zweite. Möglichst mit einem "smoothen" Übergang, damit das ganze auch nach was aussieht. Habt ihr Ideen, wie ich Divboxen "smooth" automatisch alle paar Sekunden aus und einblenden kann und das ohne viel Aufwand? Am liebsten natürlich reines HTML / CSS sofern das möglich ist, ansonsten geht natürlich auch JS
Vielen Dank im Voraus!