jQuery如何改变CSS背景位置以及鼠标悬停/移出效果

Question

我有一个由单张图片组成的菜单（例如精灵图）。为了显示悬停图像，我只需将背景图像向下移动。我希望这种效果受jQuery控制并进行动画处理。

这是一个示例菜单项。

 <ul>
  <li id="home"><a href="#"></a></li>
 </ul>

这是我正在尝试的内容。我非常新手jQuery，遇到了选择器不正确的问题。

 $(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})
   })

 });

你能指出我做错了什么吗？我知道选择器可能不正确，但我很难弄清如何操作锚。

- steelfrog

---

到底是发生了什么，还是没发生？ - Pekka

你在$('#home a')选择器的末尾缺少一个分号。加上分号能解决问题吗？ - ryanulit

@Pekka，基本上什么都没有发生。背景没有显示出来，这让我相信选择器是错误的。@ryanulit，加了分号。不幸的是，没有变化。 - steelfrog

你为什么在 $('#home a') 后面加了一个分号？那绝对是错的，会切断后面链式调用的命令。 - Pekka

@Pekka 我认为你是指“background-position-x”和“background-position-y”，但我认为这些仅适用于IE。 - Pointy

Answer 1

如果您不需要动画过渡（鉴于我所分组的精灵图像类型，我不知道为什么您会这样做），那么您需要这样做：

$(document).ready(function(){
  $('#home a')
    // On mouse over, move the background on hover
   .mouseover(function() {
     $(this).css('backgroundPosition', '0 -54px');
   })
   // On mouse out, move the background back
   .mouseout(function() {
     $(this).css('backgroundPosition', '0 0');
   })
 });

现在，如果你尝试对其进行动画处理，那么你的CSS语法和"animate"调用方式就有问题了。

$(document).ready(function(){
  $('#home a')
   // On mouse over, move the background on hover
   .mouseover(function(){
     $(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
   })
   // On mouse out, move the background back
   .mouseout(function(){
      $(this).stop().animate({backgroundPosition: "0 0"}, 500);
   })
 });

我仍然怀疑jQuery能否为您动画“backgroundPosition”，但我很少使用"animate()"，而且jQuery总是让我感到惊讶。

编辑：这里有一个页面：http://snook.ca/archives/javascript/jquery-bg-image-animations/

- Pointy

---

那就是我一直在寻找的！你的第二段代码修复了所有问题。我还缺少插件，这解决了其余的问题。谢谢！ - steelfrog

哦，太好了，我很高兴它起作用了。我得看看这个插件，因为现在我对可能使用它做的事情很好奇 :-) - Pointy

是的，你肯定需要这个插件 - http://plugins.jquery.com/project/backgroundPosition-Effect 干杯！ - foxybagga

Answer 2

{backgroundPosition:"(0 -54px)"

在CSS的background-position规则中不需要使用括号。然而，jQuery无法动画化复合值如backgroundPosition。在IE中，您可以使用backgroundPositionY来访问它，这是一个简单值，jQuery可以进行动画处理。但是这是非标准的，在其他地方无法工作。

这里有一个插件声称可以解决这个问题。

- bobince

---

是的，我认为那个页面链接到了我的答案所提到的内容。 - Pointy

Answer 3

我喜欢这种方法（只需要CSS）

.maintopbanner a:hover{
    background-position: -200px 0 !important;}
.maintopbanner a {
 -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}

- Fedwar

Answer 4

我想你的背景肯定与li有关？但是this被设置为选择器的a，如果我的假设是正确的，你需要改变你的代码为

$(document).ready(function(){

  $('#home a')

   // On mouse over, move the background on hover
   .mouseover(function(){
    $(this).parent().stop().animate({backgroundPosition:"(0 -54px)"}, {duration:500})
   })

   // On mouse out, move the background back
   .mouseout(function(){
    $(this).parent().stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
   })

 });

- harpax

---

实际上，由于IE6的限制，背景实际上设置在锚点（anchor）上。我希望可以简单地将其设置为列表项，但这样会在IE中完全破坏布局。 - steelfrog

Answer 5

         $('#home a')
.mouseenter(function(){
        $(this).parent().stop().animate({backgroundPosition:"(0 -54px)"},500)
       })
.mouseleave(function(){
        $(this).parent().stop().animate({backgroundPosition:"(0 0)"},500)
       })

//尽可能使用MouseEnter和MouseLeave，您无需在当前版本的jQuery中键入持续时间。希望这可以帮助到您。

- nolan campbell