jQuery动画背景位置

Question

我似乎无法让这个工作起来。

$('#product_family_options_dd').animate({
  height: '300px',
  width: '900px',
  backgroundPosition: '-20px 0px',          
},

高度和宽度会动画变化，但背景不会。

- jimbo

---

我在想 backgroundPosition 应该改成 background-position，或者也可以设置 background-position-x 和 background-position-y，你觉得呢？ - Luke Duddridge

我尝试了backgroun-position-x/y，它在Chrome10中似乎按预期工作，但在FF3中不行（没有在其他浏览器中进行测试）。 - KOGI

Answer 1

如果你只是使用分开的值，就不需要使用背景动画插件：

$('.pop').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

- nnyby

---

这个可以在 Firefox 中工作：https://dev59.com/BVXTa4cB1Zd3GeqP5NCX - hellodally

Mozilla在Firefox 3中取消了对background-position-x和background-position-y的支持，称其不符合HTML规范，因此这些属性不再起作用。 - Judah Gabriel Himango

请勿使用此答案，即使它有最高的投票数。因为在Firefox中它无效，因为FF不提供background-position-x/y属性。 - Jpsy

Answer 2

我猜可能是因为它期望一个单一的值?

取自jQuery的animate页面:

动画属性和值

所有动画属性都应该被动画化为单个数字值, 除非以下情况特别说明; 大多数非数字的属性不能使用基本的jQuery功能来进行动画处理。(例如，可以对width、height或left进行动画处理，但无法对background-color进行动画处理)。属性值被视为像素数量，除非另有规定。适用时可以指定单位em和%。

- Luke Duddridge

---

这是完全正确的，您需要添加CSS钩子才能使background-position在所有浏览器上可用于animate()和单个值：https://dev59.com/EW435IYBdhLWcg3w20F8#14218768 - bfncs

这个是完全正确的，只是为了澄清一下，对于像我一样找到这个问题的人，要分别指定background-position-x和background-position-y作为单独的值。不要只使用background-position。 - Reinstate Monica Cellio

Answer 3

由于jQuery默认不支持此功能，目前我找到的最佳解决方案是在jQuery中定义自己的CSS hooks。这基本上意味着定义自定义方法来获取和设置CSS值，并且还与jQuery.animate()一起使用。

已经有一个非常方便的实现版本存在于github上： https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

有了这个插件，您可以像这样做：

$('#demo1').hover(
  function() {
    $(this).stop().animate({
      backgroundPositionX: '100%',
      backgroundPositionY: '100%'
    });
  },
  function () {
    $(this).stop().animate({
      backgroundPositionX: '105%',
      backgroundPositionY: '105%'
    });
  }
);

对我而言，这个方法在所有测试过的浏览器上都可行，包括IE6+。

我之前还在线放了一个快速演示，如果你需要更进一步的指引，可以参考一下。

- bfncs

---

这帮助我为复选框制作自定义的开关样式切换皮肤。简单而干净。 - MLK.DEV

Answer 4

jQuery 的 animate 函数不仅可以直接用于 DOM 对象的属性动画，还可以 tween 变量，并使用 step 函数获取每个 tween 步骤的变量。

例如，要将背景位置从 background-position(0px 0px) 动画到 background-position(100px 500px)，可以这样做：

$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: 100, temporary_y: 500}, {
    duration: 1000,
    step: function() {
        var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px";
        $("#your_div").css("background-position",  position);
    }
});

请确保在步骤函数中不要忘记this.

- eelkedev

Answer 5

在您的jQuery代码中，backgroundPosition部分后面有一个逗号：

backgroundPosition: '-20px 0px',

然而，在列出你想要在.animate()方法（和类似的方法）中更改的各种属性时，花括号之间列出的最后一个参数不应该在其后加逗号。我不能确定这是否是背景位置没有被更改的原因，但这是一个错误，我建议修复。

更新：在我刚刚进行的有限测试中，仅输入数字值（不带“px”）可以在.animate()方法中使用backgroundPosition。换句话说，这样做是可行的：

backgroundPosition: '-20 0'

然而，这并不意味着：

backgroundPosition: '-20px 0'

希望这有所帮助。

- Jonathan Head

---

这种方法可行是因为你在动画化 background-position-x 属性的第一个值。如果你尝试用这种方法去动画化 background-position-y 属性，它将不起作用。而且你不能同时使用 background-position-y 并支持 Firefox… - Jasper

Answer 6

你不能使用简单的jQuery Animate来完成这个操作，因为它涉及到2个值。

要解决这个问题，只需包含背景位置插件，就可以随心所欲地动画化背景了。

- DivinesLight

---

这是不必要的 - 请看我的答案。 - nnyby

在Firefox浏览器中不支持background-position-y和background-position-x。 - Jasper

插件的URL已经失效。 可以在这里找到一个可用的插件：https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js 关于它的使用信息和演示可以在这里找到： http://www.marcloehe.de/demos/jquery-animatebg/ - Jpsy

Answer 7

您可以使用数学组合“-=”来移动背景。

$(this).animate( {backgroundPositionX: "-=20px"} ,500);

- user2030631

Answer 8

你可以使用 setInterval 方法改变图像背景位置，这里查看演示：http://jquerydemo.com/demo/animate-background-image.aspx

- mag

Answer 9

尝试使用 backgroundPosition:"(-20px 0)"

只是为了确认，您是否在引用背景位置插件？

在JSFiddle上面带有背景位置插件的示例。

- Mark Coleman

---

插件链接已失效，在jquery.com上不再有这样的插件。 - Ivan Solntsev

插件的链接已经失效。 可以在此找到一个可用的插件: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js 关于它的使用方式和演示信息可在以下链接中找到: http://www.marcloehe.de/demos/jquery-animatebg/ - Jpsy

Answer 10

我有一个div，名为My_div，大小为250px x 250px，背景图片也是250 x 250。

CSS：

#My_div {
    background: url("..//img/your_image.jpg") no-repeat;
    background-position: 0px 250px;
}

JavaScript：

$("#My_div").mouseenter(function() {
    var x = 250;
    (function animBack() {
        timer = setTimeout(function() {
            if (x-- >= 0) {
                $('#My_div').css({'background-position': '0px '+x+'px'});;
                animBack();
            }
        }, 10);
    })();

});
$("#My_div").mouseleave(function(){
    $('#My_div').css({'background-position': '0px 250px'}); 
    clearTimeout(timer);
}); 

希望它有所帮助

- fausto