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