I'm facing a challenge with animating my background image using background positioning. The CSS is functioning correctly, but when I attempted to enhance it by adding jQuery for a rollover effect, the animation isn't working as expected. Can anyone lend a hand in resolving this issue?
Here is my HTML snippet:
<div id="rn2">
<ul>
<li><a href="#" id="ad1" title="More Thrills" ></a></li>
<li><a href="#" id="ad2" title="More Thrills" ></a></li>
<li><a href="#" id="ad3" title="More Thrills" ></a></li>
</ul>
</div>
This is the part of my CSS related to the code:
#rn2 { width: 189px; height: 167px; margin: 0px 0px 0px 0px; float: left; position: relative; z-index: 15; }
#rn2 li{ float:left; list-style:none; margin:0px 0px 0px 0px; }
#rn2 a{ text-decoration:none; display:block; float:left;}
#rn2 #ad2{ background-image:url(../images/rn2.png); background-repeat:no-repeat; background-position:0 0; width: 189px; height:167px;}
#rn2 #ad2:hover { background-position:0 -167px;}
And here are the relevant parts from my JS script:
$('#rn2 li a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -167px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})