Question

我在使用背景定位尝试使背景图像动画时遇到问题。现在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})
})

Answer 1

来自here：

jQuery对于这类任务来说是一个很棒的库，但开箱即用，它不能正确地为背景位置设置动画

查看链接（http://snook.ca/archives/javascript/jquery-bg-image-animations/），该链接还提供了一个jQuery插件的链接，允许您为背景设置动画。

Answer 2

尝试使用'0px'而不是'0'。

背景位置渐变翻转效果

2 个答案: