如何让火狐浏览器兼容background-position的animate动画？

在做背景图片滚动的动画时，一般会用到background-position-x|background-position-y，

但火狐和欧朋浏览器不支持改表示方法，只支持原生的background-position，在做此类动画的时候，由于background-position所有浏览器都支持，所以就可以放心的使用animate做背景滚动动画了.....

可是悲剧的是，jq的animate不支持background-position的表达方式，其支持background-position-x|background-position-y，所以做背景动画就成为一个难题，如何解决呢..

在网上找到了关于此类的解决方法---就是用插件，但这个插件是基于jq 1.8版本一下，所以在使用时必须用jq 1.8版本。

代码如下：

  1 (function ($) {
  2
  3 if (!document.defaultView || !document.defaultView.getComputedStyle) {
  4
  5 var oldCurCSS = jQuery.curCSS;
  6
  7 jQuery.curCSS = function (elem, name, force) {
  8
  9 if (name === "background-position") {
 10
 11 name = "backgroundPosition";
 12
 13 }
 14
 15 if (name !== "backgroundPosition" || !elem.currentStyle || elem.currentStyle[name]) {
 16
 17 return oldCurCSS.apply(this, arguments);
 18
 19 }
 20
 21 var style = elem.style;
 22
 23 if (!force && style && style[name]) {
 24
 25 return style[name];
 26
 27 }
 28
 29 return oldCurCSS(elem, "backgroundPositionX", force) + " " + oldCurCSS(elem, "backgroundPositionY", force);
 30
 31 };
 32
 33 }
 34
 35
 36
 37 var oldAnim = $.fn.animate;
 38
 39 $.fn.animate = function (prop) {
 40
 41 if ("background-position" in prop) {
 42
 43 prop.backgroundPosition = prop["background-position"];
 44
 45 delete prop["background-position"];
 46
 47 }
 48
 49 if ("backgroundPosition" in prop) {
 50
 51 prop.backgroundPosition = "(" + prop.backgroundPosition + ")";
 52
 53 }
 54
 55 return oldAnim.apply(this, arguments);
 56
 57 };
 58
 59
 60
 61 function toArray(strg) {
 62
 63 strg = strg.replace(/left|top/g, "0px");
 64
 65 strg = strg.replace(/right|bottom/g, "100%");
 66
 67 strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
 68
 69 var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
 70
 71 return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
 72
 73 }
 74
 75
 76
 77 $.fx.step.backgroundPosition = function (fx) {
 78
 79 if (!fx.bgPosReady) {
 80
 81 var start = $.curCSS(fx.elem, "backgroundPosition");
 82
 83
 84
 85 if (!start) {//FF2 no inline-style fallback
 86
 87 start = "0px 0px";
 88
 89 }
 90
 91
 92
 93 start = toArray(start);
 94
 95
 96
 97 fx.start = [start[0], start[2]];
 98
 99
100
101 var end = toArray(fx.end);
102
103 fx.end = [end[0], end[2]];
104
105
106
107 fx.unit = [end[1], end[3]];
108
109 fx.bgPosReady = true;
110
111 }
112
113
114
115 var nowPosX = [];
116
117 nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
118
119 nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
120
121 fx.elem.style.backgroundPosition = nowPosX[0] + " " + nowPosX[1];
122
123 };
124
125 })(jQuery);
126
127
128
129 现在jq版本都已经发展好多版本了，加入了好多新的方法，所以如何既能用高版本的jq，还能解决background-position的问题呢》》》
130
131
132
133
134
135 完美解决：
136
137 (function($) {
138
139    $.fx.step["backgroundPosition"] = function(fx) {
140
141    if (typeof fx.end == ‘string‘) {
142
143    fx.start = getBgPos(fx.elem);
144
145    //fx.end原本是一个string，这里将它转换成数组，就不会再进入这个if，也方便我们下面的计算
146
147    //例 "0px -21px"
148
149    fx.end = [parseFloat(fx.end.split(" ")[0]), parseFloat(fx.end.split(" ")[1])];
150
151    }
152
153    //这里fx.pos是根据传入的时间参数，从0到1变化的浮点数
154
155    var nowPosX = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit;
156
157    var nowPosY = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit;
158
159    fx.elem.style.backgroundPosition = nowPosX + ‘ ‘ + nowPosY;
160
161
162
163    /**
164
165     * 获取backgroundPosition数组[top, left]，没有单位
166
167     */
168
169    function getBgPos(elem) {
170
171    var top = 0.0;
172
173    var left = 0.0;
174
175    if ($(elem).css("backgroundPosition")) {
176
177    //例 "0px -21px"
178
179    top = parseFloat($(elem).css("backgroundPosition").split(" ")[0]);
180
181    left = parseFloat($(elem).css("backgroundPosition").split(" ")[1]);
182
183    } else {
184
185    top = parseFloat($(elem).css("backgroundPositionX"));
186
187    left = parseFloat($(elem).css("backgroundPositionY"));
188
189    }
190
191    return [top, left];
192
193    }
194
195    }
196
197 })(jQuery);