effects.core: Convert elements height/width to px and restore after animation in all effects. Fixed #5245 - Relative width elements break when wrapped for effects

8 files changed, 22 insertions, 14 deletions

diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js
index 8ef544faa..b6485b641 100644
--- a/ui/jquery.effects.blind.js
+++ b/ui/jquery.effects.blind.js
@@ -21,7 +21,7 @@ $.effects.effect.blind = function( o ) {
 
 		// Create element
 		var el = $( this ),
-			props = [ "position", "top", "bottom", "left", "right" ],
+			props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
 			mode = $.effects.setMode( el, o.mode || "hide" ),
 			direction = o.direction || "up",
 			vertical = rvertical.test( direction ),
diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js
index 9e1117ce9..78fedb0ce 100644
--- a/ui/jquery.effects.bounce.js
+++ b/ui/jquery.effects.bounce.js
@@ -16,7 +16,7 @@ $.effects.effect.bounce = function(o) {
 
 	return this.queue( function( next ) {
 		var el = $( this ), 
-			props = [ "position", "top", "bottom", "left", "right" ],
+			props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
 
 			// defaults:
 			mode = $.effects.setMode( el, o.mode || "effect" ),
diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js
index 7650aa8f4..00a803360 100644
--- a/ui/jquery.effects.core.js
+++ b/ui/jquery.effects.core.js
@@ -410,7 +410,12 @@ $.extend( $.effects, {
 					border: "none",
 					margin: 0,
 					padding: 0
-				});
+				}),
+			// Store the size in case width/height are defined in % - Fixes #5245
+			size = {
+				width: element.width(),
+				height: element.height()
+			};
 
 		element.wrap( wrapper );
 		wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element
@@ -438,6 +443,7 @@ $.extend( $.effects, {
 				bottom: "auto"
 			});
 		}
+		element.css(size);
 
 		return wrapper.css( props ).show();
 	},
diff --git a/ui/jquery.effects.drop.js b/ui/jquery.effects.drop.js
index 24fb89db0..4265b737b 100644
--- a/ui/jquery.effects.drop.js
+++ b/ui/jquery.effects.drop.js
@@ -17,7 +17,7 @@ $.effects.effect.drop = function( o ) {
 	return this.queue( function() {
 
 		var el = $( this ), 
-			props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity' ],
+			props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity', "height", "width" ],
 			mode = $.effects.setMode( el, o.mode || 'hide' ),
 			direction = o.direction || 'left',
 			ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js
index 29da090cb..6100c33a1 100644
--- a/ui/jquery.effects.fold.js
+++ b/ui/jquery.effects.fold.js
@@ -18,7 +18,7 @@ $.effects.effect.fold = function( o ) {
 
 		// Create element
 		var el = $( this ),
-			props = ['position','top','bottom','left','right'],
+			props = ['position','top','bottom','left','right','height','width'],
 			mode = $.effects.setMode(el, o.mode || 'hide'),
 			size = o.size || 15,
 			percent = /([0-9]+)%/.exec(size),
diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js
index 00f0151af..fe0c03c53 100644
--- a/ui/jquery.effects.scale.js
+++ b/ui/jquery.effects.scale.js
@@ -116,7 +116,7 @@ $.effects.effect.size = function( o ) {
 
 			// Set options
 			mode = $.effects.setMode( el, o.mode || 'effect' ),
-			restore = o.restore || false,
+			restore = o.restore || mode !== "effect",
 			scale = o.scale || 'both',
 			origin = o.origin,
 			original, baseline, factor;
diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js
index 550329ca4..52ab331e8 100644
--- a/ui/jquery.effects.shake.js
+++ b/ui/jquery.effects.shake.js
@@ -17,7 +17,7 @@ $.effects.effect.shake = function( o ) {
 	return this.queue( function() {
 
 		var el = $( this ),
-			props = [ "position", "top", "bottom", "left", "right" ],
+			props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
 			mode = $.effects.setMode( el, o.mode || "effect" ),
 			direction = o.direction || "left",
 			distance = o.distance || 20,
diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js
index 6b0296754..ccb13fa1b 100644
--- a/ui/jquery.effects.slide.js
+++ b/ui/jquery.effects.slide.js
@@ -18,24 +18,26 @@ $.effects.effect.slide = function( o ) {
 
 		// Create element
 		var el = $( this ),
-			props = ['position','top','bottom','left','right'],
+			props = [ "position", "top", "bottom", "left", "right", "width", "height" ],
 			mode = $.effects.setMode( el, o.mode || 'show' ),
 			direction = o.direction || 'left',
 			ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
 			motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
 			distance,
-			animation = {}; 
+			animation = {},
+			size;
 
 		// Adjust
-		$.effects.save( el, props ); 
+		$.effects.save( el, props );
 		el.show();
+		distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ 
+			margin: true
+		});
+		
 		$.effects.createWrapper( el ).css({
 			overflow: 'hidden'
-		}); 
-		
-		distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ 
-			margin: true 
 		});
+		
 		if (mode == 'show') {
 			el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance );
 		}