jQuery background position not animate

Question

var d= $('#menu-top-menu').children(); 
d.hover(function(){ 
    var e= $(this).position().left; 
    var f= $(this).parent().position().left; 
    var g= e-f; 
    $('#menu-top-menu').animate({backgroundPosition, g + "px 3px"}); 
    console.log(g); 
}); 

Я не знаю, почему он не оживляет. Не могли бы вы дать мне подсказку, чтобы решить проблему? Спасибо

Answer 1

Вам необходимо предоставить свойства для анимации отдельно, а также правильный синтаксис - отделить ключ/значение параметров объектов от : не запятой. Попробуйте это:

var d= $('#menu-top-menu').children(); 
d.hover(function(){ 
    var e= $(this).position().left; 
    var f= $(this).parent().position().left; 
    var g= e-f; 
    $('#menu-top-menu').animate({ 
     'background-position-x': g + 'px', 
     'background-position-y': '3px' 
    }); 
    console.log(g); 
}); 

Вы также можете оставить из background-position-y предполагая, что он никогда не меняется, и устанавливается в CSS.

Answer 2

Проверьте с этим ... надеюсь, что он будет работать (для справки:):

$("#menu-top-menu").animate({ 
    background-position-x:"20px", 
    background-position-y: "3px" 
    },1500);