jQuery animation

[j4nk3y]

Nabend zusammen,

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.

Zum Fiddle

Ich versuche den Roten div zu verstecken und den Grünen div zu zeigen indem ich über den blauen div mit der Maus hover. Grundlegend funktioniert die Animation zwar aber wird sie zum Ende nicht angehalten. Außerdem wird die Funktion beendet wenn die Maus bewegt wird und dann wieder, wenn der blaue div getroffen wird wieder ausgeführt. Mir ist wohl klar warum dies geschieht aber ich weiß nicht wie ich dieses Verhalten unterdrücke.

Für Anregungen, Tipps oder Lösungen wär ich sehr Dankbar.

Gruß Jo

[ottogal]

Hi j4nk3y,

zuallererst würde ich die Animationen verlangsamen, damit man besser sieht, was geschieht:

.animate({width: 'toggle'},5000)

Und dann fällt auf, dass da auch der graue Hintergrund des toggle-Div sichtbar wird...

Spiel auch mal mit den Argumenten von .stop(), ich glaube (true,true) ist nicht die richtige Kombination - vielleicht muss sie auch für toggle1 und toggle2 verschieden sein.

Außerdem hast du nur eine Handler-Funktion in hover(), d.h. beim Eintritt und beim Austritt der Maus in togglebtn passiert das Gleiche - vielleicht solltest du da differenzieren (also zwei verschiedene Handler verwenden).

[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 🖖

[j4nk3y]

Moin,

Keine Stelle in der jQuery-Doku ist die richtige. Weil jQuery nicht richtig ist. Dein Fehler ist, JavaScript zu verwenden.

Ich finde aber auch keine Möglickeit, dass mit CSS zu realisieren.

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

Ja, normalerweise versuche ich auch alles erst mit CSS zu gestalten.

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

Ich würde da eher noch animation-fill-mode: forwards; hinzufügen und das mit der Tastatur sein lassen, aber das ist denk ich Geschmackssache.

Sieht dann so aus.

Ja, so konnte ich das bisher auch umsetzen. Aber das ist ja nicht das, was ich erreichen möchte.

Gruß
Jo

[Gunnar Bittersmann]

@@j4nk3y

Ich würde da eher noch animation-fill-mode: forwards; hinzufügen

?? Was soll das bei einer Transition bewirken?

und das mit der Tastatur sein lassen, aber das ist denk ich Geschmackssache.

Bedienbarkeit ist keine Geschmackssache.

Aber das ist ja nicht das, was ich erreichen möchte.

Da dein Fiddle kaputt ist, ist nicht ganz klar, was du erreichen möchtest.

LLAP 🖖

[j4nk3y]

Moin,

Ich würde da eher noch animation-fill-mode: forwards; hinzufügen

?? Was soll das bei einer Transition bewirken?

War noch etwas früh, stimmt bei transition hat das keine Wirkung.

und das mit der Tastatur sein lassen, aber das ist denk ich Geschmackssache.

Bedienbarkeit ist keine Geschmackssache.

Wie sollte der button die bedienbarkeit verbessern? Ich verwende selten die Tastatur um Webseiten zu bedienen. Und wenn ich Hundert oder mehr von diesen buttons auf der Seite hab hätte ich keine Lust mir mit Tabulator den richtigen button zu suchen um dann Enter drücken zu können um ein Event auszulösen.

Aber das ist ja nicht das, was ich erreichen möchte.

Da dein Fiddle kaputt ist, ist nicht ganz klar, was du erreichen möchtest.

Mein Fiddle tut zu 100%, dass was es soll, da ist nichts Kaputt. Nur wird die Funktion eben immerwieder ausgeführt was zu diesem konfusem Verhalten führt. Die Funktion soll einmal ausgeführt werden wenn über Blau gehovert wird und am Ende stehen bleiben, egal ob die Maus bewegt wird oder nicht. Wenn dann die Maus aus dem div toggle raus bewegt wird, soll sich Grün wieder Schließen und Rot wieder öffnen. Und dabei soll sich Blau von Rechts nach Links, beim ersten ausführen, und beim beenden von links nach Rechts bewegen.

Gruß
Jo

[JürgenB]

Hallo,

… Ich verwende selten die Tastatur um Webseiten zu bedienen. …

machst du die Seite nur für dich?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

… Ich verwende selten die Tastatur um Webseiten zu bedienen. …

machst du die Seite nur für dich?

Und wenn, warum nicht für dein zukünftiges Ich?

LLAP 🖖

[Der Martin]

Hallo,

… Ich verwende selten die Tastatur um Webseiten zu bedienen. …

machst du die Seite nur für dich?

Und wenn, warum nicht für dein zukünftiges Ich?

Beim "Surfen" im Web hat die Tastatur für mich auch eine eher untergeordnete Bedeutung, aber ich finde es trotzdem wichtig, die Tastatur-Bedienung nicht zu vergessen oder gar mutwillig zu behindern.

Mir selbst fällt das vor allem bei Formularen hin und wieder auf, die mit Javascript kaputtoptimiert wurden, so dass beispielsweise Tab/Shift-Tab nicht wie erwartet funktioniert; ärgerlich ist auch, wenn die Tab-Reihenfolge scheinbar chaotisch.
EDIT: Ich spendiere dem vorhergehenden Satz noch ein ist am Ende. ;-)

Mein Lieblings-Ärgernis in diesem Bereich sind aber Formulare, die sich nicht auf normale Weise, also durch Drücken der Enter-Taste absenden lassen. Zum Ausfüllen habe ich die Finger an der Tastatur, zum Absenden muss ich aber doch wieder nach der Maus greifen.

Beim Bedienen von Buttons oder Links nutze ich dann doch eher die Maus, aber das mag bei anderen Nutzern völlig anders sein.

So long,
 Martin

[j4nk3y]

Hey,

… Ich verwende selten die Tastatur um Webseiten zu bedienen. …

machst du die Seite nur für dich?

Nein, natürlich nicht.

Beim Bedienen von Buttons oder Links nutze ich dann doch eher die Maus, aber das mag bei anderen Nutzern völlig anders sein.

Das hat alles seine Richtigkeit, nur stellen wir uns rein hypotetisch vor, das auf der Seite dann für diese Felder 21, respektive 43 Buttons vorhanden sind die für das togglen zuständig sind. Nun enthält jedes Feld noch einmal 2 Buttons, sprich pro Seite gäbe es allein für diesen Inhalt 63 respektive 126 Buttons die mit der Tastatur angesprochen werden können. Wahrscheinlich wäre ich, rein hypotetisch der Maus schneller den richtigen Button zu klicken als 120 mal Tabulator zu drücken um dann einmal Enter zu betätigen. Ganz zu schweigen von den Buttons die nichts mit dem Main Content zutun haben.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

[…] 126 Buttons die mit der Tastatur angesprochen werden können. Wahrscheinlich wäre ich, rein hypotetisch der Maus schneller den richtigen Button zu klicken als 120 mal Tabulator zu drücken um dann einmal Enter zu betätigen.

Erzähl das demjenigen, der aufgrund einer Erkrankung wie zum Beispiel Parkinson, nicht in der Lage ist, einen Computer mit der Maus zu bedienen.

Ganz zu schweigen von den Buttons die nichts mit dem Main Content zutun haben.

Das klingt für mich (ebenso wie die 126 Buttons) nach einem Designfehler, allerdings geht aus deinen Ausführungen nicht hervor, was der Inhalt der Seite ist.

Bis demnächst
Matthias

[Mitleser]

[…] Wahrscheinlich wäre ich, rein hypotetisch mit der Maus schneller […] zu klicken […]

Erzähl das demjenigen, der aufgrund einer Erkrankung wie zum Beispiel Parkinson, nicht in der Lage ist, einen Computer mit der Maus zu bedienen.

Darf man hier als alter Zivi böse (richtig böse!) Witze machen? OK, ich verkneife es mir!

[Gunnar Bittersmann]

@@j4nk3y

sprich pro Seite gäbe es allein für diesen Inhalt 63 respektive 126 Buttons die mit der Tastatur angesprochen werden können.

Wenn du wirklich 63 dieser Dinger auf einer Seite hast, machst du vielleicht was falsch. (Matthias sprach es schon an.)

Womöglich ist es sinnvoll, per Tab-Taste den Fokus auf das betreffende Toggle-Widget zu setzen und darin mit den Pfeiltasten togglen zu lassen.

Wahrscheinlich wäre ich, rein hypotetisch der Maus schneller den richtigen Button zu klicken als 120 mal Tabulator zu drücken um dann einmal Enter zu betätigen

Du schon, andere nicht. (Matthias sprach es schon an.)

“When designing for The Web, your users could be anyone. Make fewer decisions about them so they can make more for themselves.” —Heydon Pickering

LLAP 🖖

[Gunnar Bittersmann]

@@j4nk3y

Mein Fiddle tut zu 100%, dass was es soll, da ist nichts Kaputt. Nur wird die Funktion eben immerwieder ausgeführt was zu diesem konfusem Verhalten führt.

Das meinte ich mit „kaputt“ und„nicht ganz klar, was du erreichen möchtest“.

Die Funktion soll einmal ausgeführt werden wenn über Blau gehovert wird und am Ende stehen bleiben, egal ob die Maus bewegt wird oder nicht. Wenn dann die Maus aus dem div toggle raus bewegt wird, soll sich Grün wieder Schließen und Rot wieder öffnen. Und dabei soll sich Blau von Rechts nach Links, beim ersten ausführen, und beim beenden von links nach Rechts bewegen.

Ah …

Das besteht der Trick darin, den Button so groß zu machen, dass er das .toggle2 überdeckt, damit beim Nach-links-Schieben der Button immer noch unterm Cursor ist, damit button:hover immer noch wirkt.

So groß zu sein heißt nicht so groß zu erscheinen; der rechte Teil ist transparent, damit das darunter liegende .toggle2 zu sehen ist. Guckst du.

Und immer noch kein JavaScript.

LLAP 🖖

[j4nk3y]

Hey Gunnar,

Erstmal Danke, deine Lösung und der Ansatz ist klasse.

Nur funktioniert das bei mir einfach mal überhaupt nicht...

Die Propertie display: flex; sowie flex-direction: row; des Elternelements wird vollkommen ignoriert, hab den Grund aber noch nicht ausmachen können. Damit zusammenhängend funktioniert auch alles andere nur sporadisch.

Naja ich versuche mich mal weiter.

Gruß und Danke
Jo