effects.core: Convert elements height/width to px and restore after a…

…nimation in all effects. Fixed #5245 - Relative width elements break when wrapped for effects
jquery · Jun 10, 2011 · 2c81518 · 2c81518
1 parent 19dcac2
commit 2c81518
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 14 deletions.
diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html
@@ -54,6 +54,14 @@
 		.testChildren h2 {
 			font-size: 20px;
 		}
+
+		.relWidth {
+			width: 50%;
+		}
+
+		.relHeight {
+			height: 50%;
+		}
 	</style>
 </head>
 <body>
@@ -70,6 +78,9 @@ <h2 id="qunit-userAgent"></h2>
 	<div class="animateClass test">
 		<h2>Child Element Test</h2>
 	</div>
+	<div class="relWidth relHeight testAddBorder">
+		<h2>Slide with relative width</d2>
+	</div>
 </div>
 
 </body>

diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js
@@ -54,6 +54,21 @@ $.each( $.effects.effect, function( effect ) {
 			start();
 		}));
 	});
+
+	asyncTest( "relative width & height - properties are preserved", function() {
+		var test = $("div.relWidth.relHeight"),
+			width = test.width(), height = test.height(),
+			cssWidth = test[0].style.width, cssHeight = test[0].style.height;
+
+		expect( 4 );
+		test.toggle( effect, minDuration, function() {
+			equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" );
+			equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" );
+			start();
+		});
+		equal( test.width(), width, "Width is the same px after animation started" );
+		equal( test.height(), height, "Height is the same px after animation started" );
+	});
 });
 
 module("animateClass");

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 );
 		}