1

可能重复：
jquery.animate 背景位置不起作用

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

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

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

4

5 回答 5

5

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

使用 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);​</p>

小提琴

免责声明：这不是一个完成并经过测试的插件，而是我花了十分钟在 jsFiddle 中创建的东西，但测试它并进行您需要的更改，它应该适合您。

于 2012-08-28T14:28:59.843 回答
1

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

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

看：

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

于 2012-08-28T13:58:08.277 回答
1

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

您可以探索两种选择：

  1. jQuery 背景动画插件（例如：http ://snook.ca/archives/javascript/jquery-bg-image-animations/ ）
  2. CSS3 过渡
于 2012-08-28T14:08:32.360 回答
0

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

于 2012-08-28T13:57:50.447 回答
0

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

PS对不起，我之前的帖子。

于 2012-08-28T13:58:49.213 回答