javascript - jQuery .animate issues in IE8 - Stack Overflow

admin管理员组

文章数量:1334382

I am attempting to display screenshots of an iPhone app via a scrolling background using jQuery. The code I've written works perfectly in FF & Safari, but IE throws an "Invalid argument" error.

/EDIT: I figured I'd add what IE actually does when it fails. It jumps to the second screenshot and throws the error. Every other browser animates smoothly, but IE doesn't animate, it just jumps to the second screenshot then throws the error.

Here's my code:

var scrollInterval = 5000; // scroll every 5 seconds

    // set the default position
    var current = 1284;

    var screenScroll = function(){
        var imageSize = 1284;
        var screenshotWidth = 214;
        current -= screenshotWidth;

        if ( current < screenshotWidth) {
            current = imageSize;
        }

        var bgPos = current + "px top";
        $("#screenshotDiv").animate({backgroundPosition:bgPos}, 500);
        
    }

    $(document).ready(function() {
        //Calls the scrolling function repeatedly
        var init = setInterval(screenScroll, scrollInterval);
    });

I am attempting to display screenshots of an iPhone app via a scrolling background using jQuery. The code I've written works perfectly in FF & Safari, but IE throws an "Invalid argument" error.

/EDIT: I figured I'd add what IE actually does when it fails. It jumps to the second screenshot and throws the error. Every other browser animates smoothly, but IE doesn't animate, it just jumps to the second screenshot then throws the error.

Here's my code:

var scrollInterval = 5000; // scroll every 5 seconds

    // set the default position
    var current = 1284;

    var screenScroll = function(){
        var imageSize = 1284;
        var screenshotWidth = 214;
        current -= screenshotWidth;

        if ( current < screenshotWidth) {
            current = imageSize;
        }

        var bgPos = current + "px top";
        $("#screenshotDiv").animate({backgroundPosition:bgPos}, 500);
        
    }

    $(document).ready(function() {
        //Calls the scrolling function repeatedly
        var init = setInterval(screenScroll, scrollInterval);
    });

• javascript
• jquery
• internet-explorer
• jquery-animate

Share Improve this question Follow edited Dec 17, 2020 at 10:10 peterh 1 asked Dec 11, 2010 at 1:29 Arlen AndersonArlen Anderson 2,49622 gold badges2525 silver badges3636 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I wasn't able to get this working on IE8 using just jQuery. Apparently there's a bug with jQuery background position animations on IE. Surprise, surprise IE has issues with something that works on EVERY other modern browser.

Not to worry, i found a fix. Included this script after including jQuery and it will solve the problem. I tried to find an official link to the plugin, but gave up finding an up to date one so i'll just post the file:

/**
 * @author Alexander Farkas
 * v. 1.21
 */

(function($) {
    if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
        var oldCurCSS = jQuery.curCSS;
        jQuery.curCSS = function(elem, name, force){
            if(name === 'background-position'){
                name = 'backgroundPosition';
            }
            if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if ( !force && style && style[ name ] ){
                return style[ name ];
            }
            return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
        };
    }

    var oldAnim = $.fn.animate;
    $.fn.animate = function(prop){
        if('background-position' in prop){
            prop.backgroundPosition = prop['background-position'];
            delete prop['background-position'];
        }
        if('backgroundPosition' in prop){
            prop.backgroundPosition = '('+ prop.backgroundPosition;
        }
        return oldAnim.apply(this, arguments);
    };

    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]];
    }

    $.fx.step. backgroundPosition = function(fx) {
        if (!fx.bgPosReady) {
            var start = $.curCSS(fx.elem,'backgroundPosition');

            if(!start){//FF2 no inline-style fallback
                start = '0px 0px';
            }

            start = toArray(start);

            fx.start = [start[0],start[2]];

            var end = toArray(fx.options.curAnim.backgroundPosition);
            fx.end = [end[0],end[2]];

            fx.unit = [end[1],end[3]];
            fx.bgPosReady = true;
        }
        //return;
        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];

    };
})(jQuery);

The code now works flawlessly in IE8. I haven't bothered to test in IE7 because only 13% of my traffic es from IE, so i won't bother to support older versions.... Too much of a headache.

IE requires the second argument to be {duration: 500}, right? Or is that just convention?

Actually, looking around, backgroundPosition is broken on IE8 when used with top: http://reference.sitepoint./css/background-position

Maybe you can try bottom instead?

The solution regarding the script by Alexander Farkas works but it needs first a little fix (as I needed in order to make it works). Line:

var end = toArray(fx.options.curAnim.backgroundPosition);

has to be changed in

var end = toArray(fx.end);

本文标签： javascriptjQuery animate issues in IE8Stack Overflow