bxslider-3 bxslider breaks jQuery.animate() in IE

If bxslider is included in a webpage that includes another module which uses jQuery.animate(), the other module may break.

Here is a reduced testcase: http://jsbin.com/iluwus/11

Here is the same version in which bxslider isn't included (this one works): http://jsbin.com/iluwus/9

IE < 9 throws an "Invalid argument" exception, because there is a NaN applied to the animated objects top coordinate in jQuery.fx.step._default:

fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;

This happens because bxslider overwrites the jQuery.fx.prototype.cur function and skips the additional check that the original jQuery function does:

// Get the current size
cur: function() {
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
        return this.elem[ this.prop ];
    }

    var parsed,
        r = jQuery.css( this.elem, this.prop );
    // Empty strings, null, undefined and "auto" are converted to 0,
    // complex values such as "rotate(1rad)" are returned as is,
    // simple values such as "10px" are parsed to Float.
    return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;
},

Feb 08 '12 08:02 PhilippSoehnlein

I'm having the same issue but with the integration of Lightview 3. I'm sure it's related to the same problem where jQuery.animate() is called because it throws an error when the Lightview window is just about to expand.

Here's a dev link so that you can see what's happening: http://postcardmaniaweb.com/websites2/ReelClear_new/ Pull the link up in IE8 or below and click any of the videos in the rotating bxSlider. The error that's thrown is:

SCRIPT87: Invalid argument. jquery.min.js, line 4 character 23894

I've seen a lot of other jQuery.animate() related errors when using bxSlider. How soon can we expect a fix?

thanks!

Mar 28 '12 19:03 Concept211

Update the following function at the end of the jquery.bxslider.js file

    jQuery.fx.prototype.cur = function(){
    /* START OF ORIGINAL */
    //  if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
    //      return this.elem[ this.prop ];
    //  }

    //  var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    // return r && r > -10000 ? r : 0;
    //  return r;
    /* END OF ORIGINAL */

            if ( this.elem[ this.prop ] != null && (!this.elem.style || this.elem.style[ this.prop ] == null) ) {
                    return this.elem[ this.prop ];
            }

            var r = parseFloat( jQuery.css( this.elem, this.prop ) );
            // Empty strings, null, undefined and "auto" are converted to 0,
            // complex values such as "rotate(1rad)" are returned as is,
            // simple values such as "10px" are parsed to Float.
            return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;
    }