In einem aktuellen Projekt war ein vertikales Sliding-Menü umzusetzen.
Wenn der Benutzer über eine Überschrift fährt, sollten sich die Subelemente öffnen und andere Subelemente wieder schließen.
Zunächst entschied ich mich gegen das jQuery "hover" Event, da dies auch eine "mouseout"-Funktion implementiert, die ich nicht benötige. Also wurde das jQuery "mouseover"-Event verwendet.
Soweit so gut, die Funktionalität schnell implementiert - alles läuft! Aber es gab einen doofen Effekt!
Wenn der Benutzer während der Animation bereits auf einen anderen Menüpunkt fährt, reagiert dieser danach nicht. Die Maus befindet sich also über einem Element, das sich nun eigentlich öffnen sollte!
Dass dies nicht parallel passiert ist OK und gewünscht - aber das "mouseover"-Event löst gar nicht erst aus. Auch nicht, wenn die Maus danach auf dem Element bewegt wird. Dieses Verhalten ist man eher nicht gewohnt.
Lösung: Durch Verwendung des "mousemove"-Events bleibt die Schaltfläche reaktiv, sprich das Event feuert spätestens dann, wenn der Benutzer die Maus minimal bewegt!
Ein super Verhalten, wie man es erwarten würde!
Wichtiger Hinweis: Da dieses Event natürlich sehr oft feuert, sollte direkt als erstes eine if-Bedingung eingefügt werden, welche die Aktion nur ausführen lässt, wenn dies nötig ist (hier: Das Menü nicht schon geöffnet ist). Dann sollte es auch keine Performance-Bedenken mehr geben.
Viel Spaß mit diesem Tipp!
