背景位置未设置动画-jQuery

嘿，伙计们，我今天有个小问题。我试图创建一个动画菜单，但它只是不工作。有线索吗

以下是问题

jQuery代码

$(document).ready(function(){

    $("ul li").hover(function(){
        $(this).animate({backgroundPosition: "50% 100%"});
    },
    function(){
        $(this).animate({backgroundPosition: "50% -100px"});
    });

});

CSS代码

background-color:transparent;
background-image:url(../images/menu_sel.png);
background-repeat:no-repeat;
background-position:50% -100px;

HTML代码

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Another Page</a></li>
</ul>

我还尝试了简单的CSS替换，它的工作。。。但不是动画：(

---

我无法让它工作…任何线索？？？

似乎jQuery不支持同时使用两个值，请尝试：

$(this).animate({backgroundPositionY:-100});

---

jQuery无法设置复杂css值的动画。这与您无法执行以下操作的原因相同：

$('#thing').animate({margin: "10px 0 0 10px"});

您必须设置各个属性的动画，例如：

$('#thing').animate({backgroundPositionX: "50%", backgroundPositionY: "-100px"});

明白了

正如这里所有人所建议的，jQuery不处理复杂的定位。所以下面是最终有效的方法

.mouseover(function(){
$(this).stop().animate({backgroundPosition: "50% 0"}, {duration:200});
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition: "50% -54px"}, {duration:200});
})

---

干杯！

你能创建一个JSFIDLE供我们尝试吗？尝试过不混合px和%值吗？可能你有问题？如果没有，请制作一个JSFIDLE，这样我们可以进行更多的部门内分析。是的，混合%和px值时，看起来像是firefox的错误…明智的建议…干杯！啊，我很抱歉，但我的意思是它对我不起作用，你的建议真是太棒了！

$('#thing').animate({backgroundPositionX: "50%", backgroundPositionY: "-100px"});

.mouseover(function(){
$(this).stop().animate({backgroundPosition: "50% 0"}, {duration:200});
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition: "50% -54px"}, {duration:200});
})