Autor |
Nachricht |
skate-rock
Threadersteller
Dabei seit: 29.08.2003
Ort: Osnabrück
Alter: -
Geschlecht:
|
Verfasst Fr 14.03.2008 12:20
Titel Tabnavigation animieren |
|
|
Tach!
Ich habe eine Listennavigation die animiert werden soll.
Das funktioniert folgendermaßen: ein background-image befindet
sich hinter jedem link. dieses soll man erst sehen, wenn man
mit der maus drüber geht. So weit, so gut:
Code: | ul li a.menu { width:110px; background-image:url(img/navi/startbg.png); background-repeat:no-repeat; background-position:0 -47px; }
ul li a.menu:hover { background-image:url(img/navi/startbg.png); background-repeat:no-repeat; background-position:0 0; } |
Dann sieht der Navipunkt aus wie ein hängender Reiter. Nun hätte
ich das ganze aber gerne einfach fließender und nicht einfach so
abgehackt, deshalb denke ich, das Ganze sollte doch eigentlich relativ
einfach mit jQuery machbar sein, oder?
Ich möchte praktisch, dass das background-image von oben (-47px)
nach unten (0) "reinfährt" oder irgendwie fadet.
Jemand Ahnung von jquery und kann mir sagen wie ich das hinbekomme?
Bin jetzt schon sehr dankbar!
Gruß
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Fr 14.03.2008 12:28
Titel
|
|
|
dafür musst du nicht zwingend gleich auf jquery und co springen... kleines eigenes js reicht auch...
Code: |
document.getElementById("Navipunkt").style.backgroundPosition = "0px "+xyz+"px";
|
und xyz lässte dann in ner schleife von 0 bis -47 laufen... müsste klappen
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
skate-rock
Threadersteller
Dabei seit: 29.08.2003
Ort: Osnabrück
Alter: -
Geschlecht:
|
Verfasst Fr 14.03.2008 12:41
Titel
|
|
|
danke schonmal! leider habe ich null ahnung von JS & Co, deshalb
bastel ich mir das alles immer aus schnippseln zu recht. so kann ich mit
deinem JS code leider bisher nichts anfangen..
jQuery wollte ich deshalb verwenden, weil es auf der seite eh schon
läuft, daher dachte ich es wäre vllt sinnvoll darauf aufzuspringen. um
vielleicht nochmal zu zeigen was ich gerne hätte: http://www.webdesignerwall.com/demo/jquery/animated-hover1.html
nur möchte ich nicht das die gelbe box darüber einfadet, sondern
stellt euch enfach vor, dass stattdessen das gleiche mir dem hintergrund
der blauen menüpunkte passiert. leider bekomme ich den jquery code
nicht umgestrickt..
//@m: schau ich mir gerade mal an!
danke schonmal!
Zuletzt bearbeitet von skate-rock am Fr 14.03.2008 12:43, insgesamt 1-mal bearbeitet
|
|
|
|
|
SURE612
Dabei seit: 02.12.2005
Ort: Bärlin / CB
Alter: -
Geschlecht:
|
Verfasst Fr 14.03.2008 13:00
Titel
|
|
|
das kann für vieles genommen werden
http://demos.mootools.net/Fx.Morph
aber wenn du sagst, keine js kenntnisse is etwas schwierig
(ich habe aber auch nicht viel und es trotzdem benutzt)
|
|
|
|
|
|
|
|
Ähnliche Themen |
Bild animieren???
Logo animieren
Bild animieren..
Linien Animieren
[JS/CSS] CSS-Hover mit JS animieren?
Buttonreihe animieren
|
|