jQuery背景位置没有动画

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

检查一下...希望它会起作用（寻求帮助：http://api.jquery.com/animate/）：

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