From 0cdcef5b364fa3c89d7f27935e77b453f4a56efd Mon Sep 17 00:00:00 2001 From: Colin Snover Date: Tue, 5 Oct 2010 13:28:43 -0500 Subject: [PATCH] Update $.fn.animate to change display mode only when necessary (inline, non-floated elements), and to use a more proper display mode for those elements. Fixes #2185. --- src/effects.js | 102 +++++++++++++++++++++------------------- src/support.js | 12 +++++ test/data/testsuite.css | 2 + test/index.html | 4 +- test/unit/css.js | 2 +- test/unit/effects.js | 75 ++++++++++++++++++++++++++++- 6 files changed, 145 insertions(+), 52 deletions(-) diff --git a/src/effects.js b/src/effects.js index 56141bb29..3257ac395 100644 --- a/src/effects.js +++ b/src/effects.js @@ -13,45 +13,41 @@ var elemdisplay = {}, [ "opacity" ] ]; -jQuery.fn.extend({ - show: function( speed, easing, callback ) { - if ( speed || speed === 0) { - return this.animate( genFx("show", 3), speed, easing, callback); - - } else { - for ( var i = 0, l = this.length; i < l; i++ ) { - var old = jQuery.data(this[i], "olddisplay"); - - this[i].style.display = old || ""; - - if ( jQuery.css( this[i], "display" ) === "none" ) { - var nodeName = this[i].nodeName, display; +function defaultDisplay(nodeName) { + if ( !elemdisplay[ nodeName ] ) { + var elem = jQuery("<" + nodeName + ">").appendTo("body"), + display = elem.css("display"); - if ( elemdisplay[ nodeName ] ) { - display = elemdisplay[ nodeName ]; + elem.remove(); - } else { - var elem = jQuery("<" + nodeName + ">").appendTo("body"); - - display = elem.css("display"); - - if ( display === "none" ) { - display = "block"; - } + if ( display === "none" || display === "" ) { + display = "block"; + } - elem.remove(); + elemdisplay[ nodeName ] = display; + } - elemdisplay[ nodeName ] = display; - } + return elemdisplay[ nodeName ]; +} - jQuery.data(this[i], "olddisplay", display); +jQuery.fn.extend({ + show: function( speed, easing, callback ) { + if ( speed || speed === 0 ) { + return this.animate( genFx("show", 3), speed, easing, callback); + } else { + for ( var i = 0, j = this.length; i < j; i++ ) { + // Set elements which have been overridden with display: none + // in a stylesheet to whatever the default browser style is + // for such an element + if ( jQuery.css( this[i], "display" ) === "none" && this[i].style.display !== "none" ) { + jQuery.data(this[i], "olddisplay", defaultDisplay(this[i].nodeName)); } } // Set the display of the elements in a second loop // to avoid the constant reflow - for ( var j = 0, k = this.length; j < k; j++ ) { - this[j].style.display = jQuery.data(this[j], "olddisplay") || ""; + for ( i = 0, j = this.length; i < j; i++ ) { + this[i].style.display = jQuery.data(this[i], "olddisplay") || ""; } return this; @@ -115,6 +111,9 @@ jQuery.fn.extend({ } return this[ optall.queue === false ? "each" : "queue" ](function() { + // XXX ‘this’ does not always have a nodeName when running the + // test suite + var opt = jQuery.extend({}, optall), p, hidden = this.nodeType === 1 && jQuery(this).is(":hidden"), self = this; @@ -132,12 +131,32 @@ jQuery.fn.extend({ return opt.complete.call(this); } - if ( ( p === "height" || p === "width" ) && this.style ) { - // Store display property - opt.display = this.style.display; - + if ( ( p === "height" || p === "width" ) ) { // Make sure that nothing sneaks out opt.overflow = this.style.overflow; + + // Set display property to inline-block for height/width + // animations on inline elements that are having width/height + // animated + if ( jQuery.curCSS( this, "display" ) === "inline" && + jQuery.curCSS( this, "float" ) === "none" ) { + if ( !jQuery.support.inlineBlockNeedsLayout ) { + this.style.display = "inline-block"; + } else { + var display = defaultDisplay(this.nodeName); + + // inline-level elements accept inline-block; + // block-level elements need to be inline with layout + if ( display === "inline" ) { + this.style.display = "inline-block"; + } + else { + this.style.display = "inline"; + jQuery.data( this, "oldzoom", this.style.zoom ); + this.style.zoom = 1; + } + } + } } if ( jQuery.isArray( prop[p] ) ) { @@ -303,11 +322,6 @@ jQuery.fx.prototype = { } (jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this ); - - // Set display property to block for height/width animations - if ( ( this.prop === "height" || this.prop === "width" ) && this.elem.style ) { - this.elem.style.display = "block"; - } }, // Get the current size @@ -384,17 +398,9 @@ jQuery.fx.prototype = { } if ( done ) { - if ( this.options.display != null ) { - // Reset the overflow + // Reset the overflow + if ( this.options.overflow != null ) { this.elem.style.overflow = this.options.overflow; - - // Reset the display - var old = jQuery.data(this.elem, "olddisplay"); - this.elem.style.display = old ? old : this.options.display; - - if ( jQuery.css( this.elem, "display" ) === "none" ) { - this.elem.style.display = "block"; - } } // Hide the element if the "hide" operation was done diff --git a/src/support.js b/src/support.js index 299fbd277..878db1f0b 100644 --- a/src/support.js +++ b/src/support.js @@ -66,6 +66,7 @@ scriptEval: false, noCloneEvent: true, boxModel: null, + inlineBlockNeedsLayout: false, reliableHiddenOffsets: true }; @@ -119,6 +120,17 @@ document.body.appendChild( div ); jQuery.boxModel = jQuery.support.boxModel = div.offsetWidth === 2; + // Check if natively block-level elements act like inline-block + // elements when setting their display to 'inline' + // (IE < 8 does this) + if ( 'zoom' in div.style ) { + div.style.display = 'inline'; + + // Layout is necessary to trigger this “feature” + div.style.zoom = 1; + jQuery.support.inlineBlockNeedsLayout = div.offsetWidth === 2; + } + // Check if table cells still have offsetWidth/Height when they are set // to display:none and there are still other visible table cells in a // table row; if so, offsetWidth/Height are not reliable for use when diff --git a/test/data/testsuite.css b/test/data/testsuite.css index 184689209..cffaaa46a 100644 --- a/test/data/testsuite.css +++ b/test/data/testsuite.css @@ -102,6 +102,8 @@ div.chain.test div { background: green; } div.chain.out { background: green; } div.chain.out div { background: red; display: none; } +/* tests to ensure jQuery can determine the native display mode of elements + that have been set as display: none in stylesheets */ div#show-tests * { display: none; } #nothiddendiv { font-size: 16px; } diff --git a/test/index.html b/test/index.html index d858114b1..262bd9a92 100644 --- a/test/index.html +++ b/test/index.html @@ -55,8 +55,8 @@ -