Was mich in jQuery schon immer einiges an Nerven gekostet hat war der Animation-Queue. Legt man auf ein Element bzw. auf ein Event einen bestimmten Animationsablauf, und startet diese Animation z.B. durch schnelles hintereinander klicken auf den Trigger, so werden die Animationen aneinandergereiht und nacheinander ausgeführt, auch wenn man den Trigger vielleicht schon einige Sekunden nicht mehr geklickt hat.
Im Artikel Prevent Animation Queue Buildup auf Learning jQuery wurde nun beschrieben wie man besagtes Problem sehr einfach umgehen kann.
Des Rätsels Lösung ist die stop()-Funktion, bei der vor dem Start einer Animation erstmal alle anderen Animationen der selektierten Elemente gestoppt werden. Der Animationsfluss wird also unterbrochen sobald ein neuer Trigger ausgelöst wurde.
Sehr praktisch wird das ganze z.B. bei Hover-Events, wo der User durch schnellere Mausbewegungen sehr schnell einen unschönen Animation-Queue aufbauen kann.
Wer öfters mit Photoshop arbeitet, dem wird in manchen Bereichen wahrscheinlich schonmal die Problematik der halben Pixel aufgefallen sein. Halbe Pixel ist eigentlich falsch, die gibt es rein physikalisch nicht. Mit halben Pixeln stellen sich Ränder immer in ein wenig “ausgefranst” bzw. transparent dar. Manchmal kann das ja ganz nützlich sein, doch was wenn man gerade mit Formen eine gestochen scharfe Box aufziehen möchte?
Die letzten 4 Jahre machte ich es mir immer mehr als umständlich und justierte alle aufgezogenen Formen solange nach, bis diese gestochen Scharf dargestellt wurden. Umständlich und Aufwendig.
Andi Portmann von Konkret zeigte mir dann vor kurzem im Sefrengo-Channel die eigentlich so nahe liegende Lösung zur Vermeidung von halben Pixeln (zumindest was Formen/Forms angeht).
Um noch einmal zu verdeutlichen was es mit dem Phänomen der halben Pixel auf sich hat, hier eine Grafik die links (A) eine abgerundete Box mit abgestuften Kanten und rechts (B) eine Box mit gestochen scharfen Kanten zeigt. Unser Ziel ist als B :)
Ok, und wie kommen wir nun zu unseren scharfen Kanten? Es ist eigentlich nur ein einziger Klick den ich jedoch trotz jahrelanger Anwendung bisher immer übersehen habe.
Man wähle also in der Toolbar die Forms aus, erweitert das Menü dann über einen Klick auf den vertikalen Pfeil am Ende der Auswahlliste und macht zu guter letzt einen freudigen Klick auf die Option “An Pixeln ausrichten”, fertsch. Von nun an gibts zumindest beim erstellen von Formen keine Probleme mehr mit ausgefransten Rändern.
Vielleicht hilft das ja dem ein oder anderem der genauso blind war wie ich.
