✔ [jQuery] Animierung mit Bilddateien als Links?

[Dragonate]

Hi Leute, ich schildere kurz das Problem:

Ich habe Buttons als Bilddateien gebastelt, und die auf meiner Seite ins Menü eingestetzt. Die Buttons haben eine Höhe von 64 px, wobei der eigentliche Button 32 px hat, die anderen 32 px stellen nämlich den hover Button dar.
Also quasi eine Bilddatei mit der Höhe 64 px, die zur Hälfte den Standard und zur Hälfte den Hover-Button enthält.
Nun wollte ich, wie ich es wo gelesen hab, den Button mit jquery animieren, das sich logischerweise beim "hovern" der untere Teil des Bildes zeigt, was wol mit einer Positionierungsangabe geht, und da scheitert es bei mir.
Ich habe folgende Funktion gefunden:

$('a')
	.css( {backgroundPosition: "0 0"} )
	.mouseover(function(){
		$(this).stop().animate({backgroundPosition:"(0 -60px)"}, {duration:500})
	})
	.mouseout(function(){
		$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
	})

Von den positionsangaben habe ich leider wenig Ahnung. Meine Links sind in CSS entsprechend der Bildgröße formatiert (werden auch auf der Seite richtig angezeigt)

#navi_oben a {
    display:block;
    width:150px;
   height:32px;
}

Die jquery Funktion habe ich kopiert, sie funktioniert so aber nicht. Entweder ist da was falsch oder ich wende die Positionsangaben falsch an. Theoretisch soll jQuery die unteren 32 px des Bildes einblenden. Kann mir da wer bitte helfen ?

 

[Sven Mintel]

Moin,

animate() ist dafür eigentlich nicht geeignet.

1. Lässt sich dort nur mit numerischen Werten arbeiten, was bei backgroundPosition nicht geht, da du dort 2 Werte hast
2. Glaube ich nicht unbedingt, dass dir dieser Effekt gefallen würde

Eigentlich sollte es ausreichen, die backgroundPosition per css() zu setzen.