2
我遇到了问题，试图使我的背景图像动画使用背景定位。现在CSS工作正常，但是当我试图通过添加jQuery来添加一些性感以使背景位置翻转效果动画/淡入，但是它不能正常工作。有人可以帮我解决这个问题吗？背景位置褪色翻转效果
这是我的HTML代码：
<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>
这是我的CSS代码：
#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;}
这是我的JS代码：
$('#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})
})