i

Verzögert erscheinde Elemente

Elemente können später eingeblendet werden. Dafür stehen verschiedene Zeiten zur Verfügung.

Hier erscheinen nacheinander sechs Buttons.

<button class="verzoegert--5">Hallo, Welt</button>
<button class="verzoegert--10">Hallo, Welt</button>
<button class="verzoegert--20">Hallo, Welt</button>
<button class="verzoegert--30">Hallo, Welt</button>
<button class="verzoegert--60">Hallo, Welt</button>
<button class="verzoegert--120">Hallo, Welt</button>

Die Zahl in der CSS-Klasse gibt dabei Sekunden an. Es stehen 5, 10, 20, 30, 60 und 120 Sekunden zur Verfügung.

Das funktioniert natürlich auch mit ganzen Boxen:

Aufklappbutton 1

Inhalt der eigentlichen Box.

Aufklappbutton 2

Inhalt der eigentlichen Box.

Aufklappbutton 3

Inhalt der eigentlichen Box.

<details class="information verzoegert--5">
  <summary>Aufklappbutton 1</summary>
  <p>Inhalt der eigentlichen Box.</p>
</details>
<details class="information verzoegert--10">
  <summary>Aufklappbutton 2</summary>
  <p>Inhalt der eigentlichen Box.</p>
</details>
<details class="information verzoegert--20">
  <summary>Aufklappbutton 3</summary>
  <p>Inhalt der eigentlichen Box.</p>
</details>

Für geschachtelte Boxen ist es sogar möglich, dass weitere Tipps jeweils nach z.B. 10 Sekunden erscheinen. Dabei startet die Zeit erst, wenn die Elternbox sichtbar ist.

Aufklappbutton 1

Inhalt der eigentlichen Box.

Aufklappbutton 2

Inhalt der eigentlichen Box.

Aufklappbutton 3

Inhalt der eigentlichen Box.

Die Animation funktioniert jedoch nur einmal nach Auslösung.

<details class="information verzoegert--10">
  <summary>Aufklappbutton 1</summary>
  <p>Inhalt der eigentlichen Box.</p>
  <details class="information verzoegert--10">
    <summary>Aufklappbutton 2</summary>
    <p>Inhalt der eigentlichen Box.</p>
    <details class="information verzoegert--10">
        <summary>Aufklappbutton 3</summary>
        <p>Inhalt der eigentlichen Box.</p>
    </details>
  </details>
</details>

Suche

v
17.6.3.3.10
dev.inf-schule.de/infschule/dokumentation/kapitel-erstellen/textbereich/verzoegerung
dev.inf-schule.de/17.6.3.3.10
dev.inf-schule.de/@/page/sifrdmpCUPbrhsA6

Rückmeldung geben