Положение фона не анимируется - 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"});

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

Ура!