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