背景位置不動畫 - 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不處理複雜的定位。所以下面是最後的工作！

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

乾杯！

Answer 2

看來，jQuery的不支持動畫兩個值同時，嘗試：

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

Answer 3

jQuery的不能動畫複雜的CSS值..它是你不能這樣做同樣的原因：

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

你必須動畫的各個屬性，如：

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