jQuery 背景位置在 FireFox 中不起作用？ [复制]答案

【问题标题】：jQuery background position doesn't work in FireFox? [duplicate]jQuery 背景位置在 FireFox 中不起作用？ [复制]
【发布时间】：2012-08-28 13:55:55
【问题描述】：

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

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

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

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

【问题讨论】：

你可以试试这个stackoverflow.com/questions/6322347/…

标签： jquery css firefox

【解决方案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 中创建的东西，但测试它并做你需要的更改，它应该适合你。

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

您可以探索两种选择：

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

【讨论】：

该插件可以在 FF 中工作（如果您使用的是 jQuery 1.7）。 jQuery 1.8 搞乱了 backgroundPosition 的整个概念 :(

【解决方案4】：

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

【讨论】：

它如何在 Chrome 中运行？还有其他方法可以为背景位置设置动画吗？
因为 Chrome 复制了一堆特定于 IE 的东西（包括诸如 window.event 之类的东西）。

【解决方案5】：

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

附：对不起，我之前的帖子。

【讨论】：

再一次，animate 不接受两个值！
编辑的代码，这应该对你有帮助:) 使用字符串中的值
你在发帖前会测试这些东西吗？
adeneo - 我的错，很抱歉造成混乱未经测试的功能，我很确定它会工作并且不测试它