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.
Nun habe ich mich ja in letzter Zeit neben CakePHP auch mit dem jQuery-Framework beschäftigt, und in diesem Zusammenhang eine kleine “Probeanwendung” gebaut, nämlich eine Login-Seite mit Ajax-Funktionalität. Für den ein oder anderen stellt sich nun sicherlich die Frage, ob solch eine Funktion wirklich sinnvoll ist…doch für mich zählt hier eher die Erklärung als der Sinn des Ganzen :-).
Wie das Ganze später aussehen könnte seht ihr in dieser kurzen Demo (richtiger Login: gast:gast). Das ganze wurde grafisch natürlich ein wenig aufgepeppt. Um die jQuery-Animationen auf dem variablen Hintergrund hinzubekommen musste auf das PNG-Format zurückgegriffen werden, zudem wurde für die IE6-User ein PNG-Behaviour eingesetzt.
Ich möchte euch einmal kurz eine Einweisung zu einem kleinen Javascript geben, welches wirklich sehr einfache und hübsche Überblendeffekte für Fotos ermöglicht.
Ich stand letztens vor dem “Problem” das ein Kunde eine einfache Slideshow als Designelement in seine neue Webseite einbinden wollte. Da ich nicht der erfahrenste in Sachen Flash bin (aus gutem Grund) schaute ich mich nach einer Lösung für JavaScript um und bin nach einigem Suchen auch auf die perfekte Lösung gestoßen.
