The object below (type is irrelevant - this happens to be a div, but the same thing occurs with an img, for example) has a border of 20px. Its width and height, as returned by the jQuery functions, are displayed.
The links will animate width and height only. In Opera (I have v9.23), note the jump - particularly noticeable if you click the same link twice.
This is because the borders are being included in the starting width and height when initialising the animation. The problem is
located in fx.cur(), when curCSS() is used to get the width/height values. Clicking the 'apply the fix' link
will apply my (quick) patch for the problem and the animation will become smooth.
/* THE FIX : ...*/
jQuery.Z_css = jQuery.css;
jQuery.css = function(elem, name, force){
return ( name == "height" || name == "width" ) ?
jQuery.Z_css(elem, name) : jQuery.curCSS(elem, name, force);
};
jQuery.fx.prototype.cur = function(force){
if ( this.elem[this.prop] != null && this.elem.style[this.prop] == null )
return this.elem[ this.prop ];
//wizzud...switched curCSS() for css(), and vice versa, in the 2 lines below...
var r = parseFloat(jQuery.css(this.elem, this.prop, force));
return r && r > -10000 ? r : parseFloat(jQuery.curCSS(this.elem, this.prop)) || 0;
};
animate to 200x300
animate to 300x200
animate to 400x400
animate to 200x200
apply the fix