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

 });

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

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语法和“动画”调用都会有错误的语法。

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

Answer 2

{backgroundPosition：“（0 -54px）”

（你不想在那里使用括号.CSC background-position规则中没有括号。）

在任何情况下，jQuery都不知道如何为像backgroundPosition这样的复合值设置动画。在IE中，您可以使用backgroundPositionY访问它，作为一个简单的值，jQuery 可以动画。然而，这是非标准的，不适用于其他地方。

声称要修复它的

Here's a plugin。

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

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

 });

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输出持续时间。希望这会有所帮助。

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

5 个答案: