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

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