jQuery change CSS background position and mouseover/mouseout
- by steelfrog
I have a menu composed of a single image (e.g., sprites). In order to display the hover image, I simply move the background image down. I'd like this effect to be controlled by jQuery and animated.
This is a sample menu item.
<ul>
<li id="home"><a href="#"></a></li>
</ul>
This is what I'm toying with. I'm very new to jQuery and am having problems getting the proper selector going.
$(document).ready(function(){
$('#home a');
// Set the 'normal' state background position
.css( {backgroundPosition: "0 0"} )
// On mouse over, move the background
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -54px)"}, {duration:500})
})
// On mouse out, move the background back
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
Could you point out what I'm doing wrong? I know the selector is probably incorrect but I'm having a hard time figuring out how to manipulate the anchor.
