jQuery animate change

Question

Неужели кто-нибудь видит проблему здесь? Это не работает.

$('#div1').hover(
       function() {      
        $('#div2').stop().animate({ backgroundPosition : '(0 -60px)' }, 500);      
        $('#div3').stop().animate({ marginRight : '-=10px;' }, 500); 
       }, 
       function() {     
        $('#div2').stop().animate({ backgroundPosition : '(0 0)'}, 500);       
        $('#div3').stop().animate({ marginRight : '+=10px;'}, 500); 
       }); 

Answer 1

JSFiddle

Вы имели точку с запятой в маржинальной правой ширины и скобкой в ​​фоновом положении.

Кроме того, вы не загрузили jQuery в скрипке.

$('#div1').hover(
    function() {      
     $('#div2').stop().animate({ 'background-position-x' : '0px', 'background-position-y': '-60px' }, 500);       
     $('#div3').stop().animate({ 'margin-right' : '-=10px' }, 500); 
    }, 
    function() { 
     $('#div2').stop().animate({ 'background-position-x' : '0px', 'background-position-y': '0px'}, 500);       
     $('#div3').stop().animate({ 'margin-right' : '+=10px'}, 500); 
}); 

Я также строчил определения css, иногда они не работают в противном случае, поэтому я всегда использую строки всегда на всякий случай.

Отмечено значения x и y согласно this question.

Answer 2

этого:

$('#div2').stop().animate({ backgroundPosition : '(0 -60px)' }, 500); 

недействителен!

jQuery не понимает '(0 -60px)', поэтому ничего не происходит, и вы не можете анимировать оба значения в любом случае, поскольку анимация принимает только одно значение за раз, если я правильно помню, что это будет ось X, а не ось Y , Вы должны будете использовать метод step() для этого:

EDIT:

Там на самом деле решение проблемы фона анимации в этом ответе, это кросс-браузер:

JQuery Animate Background Image on Y-axis