This code is extension created by Alexander Farkas http://bit.ly/bZzOC8
It is usefull for could used two values on the function animate() as in this example:
$('div').animate({
backgroundPosition:'(0 -5500)'
},330);
Unfortunately this extension doesn’t work when use IE7 or IE8.
The next code is the backgroundPosition extension:
/**
* @author Alexander Farkas
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
the IE debugger finded the error on this line.
strg = strg.replace(/left|top/g,'0px');
I want use this plug-in because the backgroundPositionY or X aren’t compatible on firefox and Opera. How to fix the error on IE7 and 8?.
It’s possible find the solution in this link, IE8 and jQuery null pointers In any case this is the code that fix the ie bug