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

Answer 2

似乎jQuery不支持动画两个值，请尝试：

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

Answer 3

想出来了！

正如所有人的建议，jQuery不能处理复杂的定位。所以下面是最终的工作!!

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

干杯！

背景位置不动画 - jQuery

3 个答案: