背景位置不动画 - jQuery

Question

嘿伙计我今天有点问题.我正在尝试创建一个动画菜单,但它只是无法正常工作.有任何线索吗？

以下是问题.

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>

我甚至尝试在jQuery鼠标悬停但没有去:(

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

我也试过简单的CSS替换,它的工作原理......但不是动画:(

$("ul li")      
.mouseover(function(){
    $(this).css({backgroundPosition: "50% 100%"});
})
.mouseout(function(){
    $(this).css({backgroundPosition: "50% -100px"});
})

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

Answer 1

jQuery无法为复杂的css值设置动画..这与你不能做的事情相同:

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

您必须为各个属性设置动画,例如:

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