• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JQuery: Einblenden

blabla333

Mitglied
Wie kann ich das Einblenden des Spots (links) nach dem Laden des Bildes und das Einblenden der Box beim Überfahren des Punktes wie in diesem Beispiel (http://kreaturamedia.com/wpstickies-premium-image-tagging-plugin-for-wordpress/) umsetzen?

Mir scheint das keine Option, die über jquery.easing.js gemacht wird; zumindest nicht eine einfache Option. Werden hier mehrere Dinge kombiniert? Ich komme einfach nicht drauf...

Der Spot wird ja eingeblendet und gleichzeitig nach oben geschoben und die Box wird als ganzes eingeblendet und dann ebenfalls zum Spot geschoben, wobei hier ein wenig "über das Ziel hinaus" und dann wieder korrigiert verschoben wird.
 
Als erstes würde ich per CSS 3 eine Box bauen, die beim Hovern diesen Bouncing-Effekt nachbildet. Dafür eignen sich die Attribute Transition und Animation. Im zweiten Schritt wird das mit einem fade-in kombiniert. Soweit ist es reines CSS.

Im dritten Schritt würde ich eine jQuery-Funktion schreiben, die
- ein Div erstellt
- das Element an der gewünschten Stelle platziert
- Dem Element Text zuweist, der von irgendwo her (data-Attribut, Ajax?) kommt

Anschließend die Funktion mit dem Eventlistener hover() aufrufen. Die Animationen der Box könnte man per css() oder addClass() einbetten, und beim mouseout wird sie mit remove() wieder aus dem DOM gelöscht.
 
Zuletzt bearbeitet:
Zurück
Oben