函数animate（）中backgroundposition的扩展名在IE7或IE8中不起作用 [英] extension of the backgroundposition in the function animate() dosen't work in IE7 or IE8

问题描述

此代码是Alexander Farkas创建的扩展程序 http://bit.ly/bZzOC8
It是有用的可以在函数animate（）上使用两个值，如下例所示：

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

不幸的是，当使用IE7或IE8时，此扩展名不起作用。
下一个代码是backgroundPosition扩展名：

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

IE调试器在此行找到错误。

the IE debugger finded the error on this line.

strg = strg.replace(/left|top/g,'0px');

我想使用这个插件，因为backgroundPositionY或X在firefox和Opera上不兼容。如何修复IE7和8上的错误？

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?.

推荐答案

可以在此链接中找到解决方案， IE8和jQuery空指针无论如何，这是修复ie bug的代码

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

/**
 * @author Alexander Farkas
 * v. 1.02
 */
(function($){   
    $.extend($.fx.step,{       
        backgroundPosition: function(fx){            
            if (fx.state === 0 && typeof fx.end == 'string'){
                if(navigator.appName == 'Microsoft Internet Explorer'){ //bugfix to IE
                    var start = $.curCSS(fx.elem,'backgroundPositionX');
                    start +=  ' ';
                    start += $.curCSS(fx.elem,'backgroundPositionY');
                }
                else {
                    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);

这篇关于函数animate（）中backgroundposition的扩展名在IE7或IE8中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！