Question

可能重复：
jquery.animate background-position doesn't work

我有一个小脚本可以动画背景位置，遗憾的是它在FireFox中不起作用它适用于IE和Chrome。

$('#background').animate({
     'background-position-x': -1020
});

为什么它在FireFox中不起作用？
提前谢谢！

Answer 1

你可以随时创建自己的小插件，但并不难。

使用jQuery 1.8，我们现在可以访问$ .Animation方法，直接为我们提供动画值，而不需要太多工作，所以我们可以这样做：

$.fn.animateBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = parseInt(pos[0]) || 0;
    this.y = parseInt(pos[1]) || 0;
    $.Animation( this, {
        x: x,
        y: y
      }, { 
        duration: speed
      }).progress(function(e) {
          this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    });
    return this;
}

然后使用它我们可以做到：

$("#background").animateBG(x-value, y-value, speed);

直播示例： $（“＃background”）。animateBG（“0px”，“ - 45px”，300）;

FIDDLE

免责声明：这不是一个经过完善和测试的插件，但我花了十分钟在jsFiddle中创建，但测试它并进行所需的更改，它应该可以正常工作。

Answer 2

引用https://stackoverflow.com/a/8378817/168735

background-position-x是非标准CSS属性，Firefox不支持。

请参阅：

http://snook.ca/archives/html_and_css/background-position-x-y   https://stackoverflow.com/a/8175460/1011582

Answer 3

如前所述，background-position-x和background-position-y是非标准的。

您可以探索两种选择：

jQuery后台动画插件（例如：http://snook.ca/archives/javascript/jquery-bg-image-animations/）
CSS3过渡

Answer 4

您可以在此处阅读：http://my.safaribooksonline.com/0130092789/ch14lev1sec7?portal=oreilly，这是Internet Explorer CSS特定属性。

Answer 5

Firefox不支持background-position-x或background-position-y。您应该编写一个简单的函数来计算当前的x和y位置，所需的位置，并使用setTimeout和$(el).css为其设置动画。或者使用CSS3动画。

P.S。对不起，我以前的帖子。

jQuery背景位置在FireFox中不起作用？

5 个答案: