Background Position fading rollover effect

I'm having issues trying to make my background image animate using background positioning. Right now the CSS is working properly but when I tried to add some sexiness by adding jQuery to make the background position rollover effect animate/fade, however it's not working properly. Can someone help me out with this issue?

This is my HTML code:

<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 my CSS 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;}

This is my JS code:

$('#rn2 开发者_C百科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})
})

From here:

jQuery is a great library for this type of task but out of the box, it can't animate background position properly

Take a look at the link (http://snook.ca/archives/javascript/jquery-bg-image-animations/), which also provides links to a jQuery plugin that will allow you to animate the background.

Try using '0px' instead of just '0'.