jQuery 背景位置在 FireFox 中不起作用? [英] jQuery background position doesn't work in FireFox?

问题描述

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

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

I have a small script that animates background positions, sadly it doesn't work in FireFox.
It works in IE and Chrome.

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

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

How come it doesn't work in FireFox?
Thanks in advance!

推荐答案

你总是可以创建自己的小插件，没那么难.

You can always create your own little plugin, it's not that hard.

使用 jQuery 1.8，我们现在可以访问 $.Animation 方法，该方法无需太多工作即可直接为我们提供动画值，因此我们可以执行以下操作:

Using jQuery 1.8 we now have access to the $.Animation method that gives us the animated values directly without to much work, so we can do something like :

$.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);

live example: $("#background").animateBG("0px", "-45px", 300);​

小提琴

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

Disclaimer: This is not a finished and tested plugin, but something I spent ten minutes creating in jsFiddle, but test it out and do the changes you need to, and it should work just fine for you.

这篇关于jQuery 背景位置在 FireFox 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！