Question

有人可以告诉我为什么这个jquery不起作用吗？

我有一个这样的清单：

      <div id="services">
            <h1>Services</h1>
            <ul>
                <li class="menu"><a href="#">menu item1</a></li>
                <li class="menu"><a href="#">menu item2</a></li>
                <li class="menu"><a href="#">menu item3</a></li>
                <li class="menu"><a href="#">menu item4</a></li>
            </ul>
        </div>

我希望在悬停时从左侧滑动背景图像，然后在鼠标移动时将其反转。

以下jquery代码在moueover或mouseout上没有做任何事情。我在这里缺少什么？

$(function(){       
    $('li.menu a').css( {backgroundPosition: "-416px 0"})
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:"(0px 0px)"}, 500)
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:"(-416px 0)"}, 500)
    });
});

Answer 1

您无法为背景位置设置动画，您可以执行以下操作：

$('li.menu a').css({
    opacity: 0.5,
    marginLeft: "-5px"
});

$('li.menu a').mouseover(function() {
    $(this).stop().animate({
        marginLeft: "0px",
        opacity: 1
    }, 500)
}).mouseout(function() {
    $(this).stop().animate({
        marginLeft: "-5px",
        opacity: 0.5
    }, 500)
});

<强> Just a demo

Answer 2

你有运气:) 我昨天遇到了同样的问题。我看到你，和我一样，只需要在X轴上动画。

所以你需要做的就是将单个参数传递给backgroundPosition，这是X轴的默认值。也传递int，这是像素的默认值。

$('li.menu a').css({
     backgroundPosition: -416
}).mouseover(function(){
     $(this).stop().animate({backgroundPosition: 0}, 500)
}).mouseout(function(){
     $(this).stop().animate({backgroundPosition: -416}, 500)
});

Answer 3

如果没有a plugin，您似乎无法做到这一点。

Answer 4

试试这个，

$('li.menu a').css({background-position-x:"-416px",background-position-y:"0"}); 

$('li.menu a').mouseover(function(){
    $(this).stop().animate({background-position-x:"0",background-position-y:"0"}, 500)
})
.mouseout(function(){
    $(this).stop().animate({background-position-x:"-416px",background-position-y:"0"}, 500)
});

Jquery动画在背景位置不工作

4 个答案:

您无法为背景位置设置动画，您可以执行以下操作：