jQuery animation

[Gunnar Bittersmann]

@@j4nk3y

ich brüte seit einiger Zeit über folgendem Problem und komme mittlerweile nicht mehr weiter/ bzw finde nicht die richtige Stelle in der jQuery Doku.

Keine Stelle in der jQuery-Doku ist die richtige. Weil jQuery nicht richtig ist. Dein Fehler ist, JavaScript zu verwenden. Und damit ein Kätzchen zu töten. Und das, obwohl die Viecher vom Aussterben bedroht sind. Besonders im Internet.

Einfache Animationen macht man mit CSS. Hardware-beschleunigt, ruckelfrei. (Deshalb wird transition auf transform oder opacity angewandt.)

Und wenn der Toggle-Button im DOM vor den zu toggelnden Dingern steht, braucht du überhaupt kein JavaScript.

Und warum Plural? Es könnte doch genügen, eins von den Dingern zu ändern und damit den Blick auf das andere freizugeben.

Per Selektor für nachfolgende Geschwister: button:hover + .toggle1

Ja, für den Toggle-Button ist ein button-Element zu verwenden, kein div. Dann funktioniert das auch mit Tastatursteuerung:
button:focus + .toggle1

Sieht dann so aus.

Was passiert da?

Der Container .toggle-widget bekommt Breite und Höhe. Außerdem eine Maximalbreite, damit er bei weniger zur Verfügung stehender Breite schmaler wird. Die Kindelemente .toggle1, .toggle2 und button bekommen Breitenangaben in Prozent.

Und sie werden absolut im Container positioniert, weshalb der Container position: relative braucht. Die divs liegen damit genau übereinander. .toggle1 wird per z-index vor .toggle2 geholt.

Wird der Button gehovert oder fokussiert(!), wird .toggle1 um seine eigene Breite nach links geschoben. Damit es dort nicht sichtbar ist, hat der Container overflow: hidden.

Diese Verschiebung wird nun animiert ausgeführt.

* * *

Die Beschriftung des Buttons kannst du mit image replacement verstecken.

In .toggle2 stecken keine wichtigen Informationen‽ Es gibt ja Geräte, die haben gar kein Hover-Effekt.

LLAP 🖖