Анимированный фон не работает должным образом

Question

Я делал подобные вещи раньше, но сейчас это не работает для меня ...

У меня есть контейнер div и div внутри с частично прозрачным изображением. Когда пользователь наводит курсор на контейнерный элемент div, я бы хотел, чтобы фон этого элемента перемещался на 0px -56px. Я пробовал это с использованием анимации, как я обычно делаю, это не работает. Изначально мой старый скрипт не работал в 1.6, поэтому я вернулся на 1.4.2, это не имеет значения, так что, возможно, мой код просто мусор ...

$('.trans_bg').css({"background-position":"0 0"});
$('.trans_bg').hover(
function() {
    $(this).animate({backgroundPosition: "(0px -56px)"},{duration:300}); 
},
function(){
    $(this).animate({backgroundPosition: "(0px 0px)"},{duration:300});
})

Есть идеи?

Answer 1

Ваш код почти правильный, просто уберите круглые скобки при установке новой позиции:

$('.trans_bg').css({ backgroundPosition: "0 0" });
$('.trans_bg').hover(function() {
    $(this).animate({ backgroundPosition: "0px -56px"}, 300);
}, function() {
    $(this).animate({ backgroundPosition: "0px 0px"}, 300);
});

Но, к сожалению, jQuery не может анимировать backgroundPosition изначально.

Но для этого есть отличный плагин: Плагин фоновой анимации позиции .

Захватите его в свой проект, чтобы набранный код только начал работать!