jQuery 更改 CSS 背景位置和鼠标悬停/鼠标悬停

Question

我有一个由单个图像(例如 Sprite )组成的菜单。为了显示悬停图像，我只是将背景图像向下移动。我希望此效果由 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})
   })

 });

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

Answer 1

如果您不对过渡进行动画处理——考虑到我将这些图像归类为 Sprite ，我不知道您为什么要这样做——那么您会想要这样的东西:

$(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 语法和“动画”调用的语法都不好。

$(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/