effects.explode: rework math used to split the div into peices - split the box disregarding margins

Fixes #3968 - effects explode: explodes from the right instead of from the center

Author: gnarf

ui/jquery.effects.explode.js

@@ -18,45 +18,62 @@ $.effects.explode = function( o ) {
 
 		var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3,
 			cells = rows,
-			el = $( this ).show().css( 'visibility', 'hidden' ),
+			el = $( this ),
 			mode = $.effects.setMode( el, o.mode || 'hide' ),
-			offset = el.offset(),
-			width = el.outerWidth( true ),
-			height = el.outerHeight( true ),
-			peices = [];
+			show = ( mode == 'show' ),
 
-		//Substract the margins - not fixing the problem yet.
-		offset.top -= parseInt( el.css( "marginTop" ), 10 ) || 0;
-		offset.left -= parseInt( el.css( "marginLeft" ), 10 ) || 0;
+			// show and then visibility:hidden the element before calculating offset
+			offset = el.show().css( 'visibility', 'hidden' ).offset(),
+
+			// width and height of a piece
+			width = Math.ceil( el.outerWidth() / cells ),
+			height = Math.ceil( el.outerHeight() / rows ),
+			peices = [],
+			i, j, pos;
 
 		// clone the element for each row and cell.
-		for( var i = 0; i < rows ; i++ ) { // =
-			for( var j = 0; j < cells ; j++ ) { // ||
+		for( i = 0; i < rows ; i++ ) { // ===>
+			for( j = 0; j < cells ; j++ ) { // |||
+				pos = {
+					// wrapper base position in body
+					left: offset.left + j * width,
+					top: offset.top + i * height,
+
+					// x position in matrix with 0,0 at the center
+					rx: j - cells / 2,
+					ry: i - rows / 2
+				};
+
+				// Create a clone of the now hidden main element that will be absolute positioned
+				// within a wrapper div off the -left and -top equal to size of our pieces
 				el
 					.clone()
-					.appendTo('body')
-					.wrap('<div></div>')
+					.appendTo( 'body' )
+					.wrap( '<div></div>' )
 					.css({
 						position: 'absolute',
 						visibility: 'visible',
-						left: -j*(width/cells),
-						top: -i*(height/rows)
+						left: -j * width,
+						top: -i * height
 					})
+
+				// select the wrapper - make it overflow: hidden and absolute positioned based on
+				// where the original was located +left and +top equal to the size of pieces
 					.parent()
-					.addClass('ui-effects-explode')
+					.addClass( 'ui-effects-explode' )
 					.css({
 						position: 'absolute',
 						overflow: 'hidden',
-						width: width/cells,
-						height: height/rows,
-						left: offset.left + j*(width/cells) + (o.mode == 'show' ? (j-Math.floor(cells/2))*(width/cells) : 0),
-						top: offset.top + i*(height/rows) + (o.mode == 'show' ? (i-Math.floor(rows/2))*(height/rows) : 0),
-						opacity: mode == 'show' ? 0 : 1
+						width: width,
+						height: height,
+						left: pos.left + ( show ? pos.rx * width : 0 ),
+						top: pos.top + ( show ? pos.ry * height : 0 ),
+						opacity: show ? 0 : 1
 					}).animate({
-						left: offset.left + j*(width/cells) + (o.mode == 'show' ? 0 : (j-Math.floor(cells/2))*(width/cells)),
-						top: offset.top + i*(height/rows) + (o.mode == 'show' ? 0 : (i-Math.floor(rows/2))*(height/rows)),
-						opacity: mode == 'show' ? 1 : 0
-					}, o.duration || 500, childComplete );
+						left: pos.left + ( show ? 0 : pos.rx * width ),
+						top: pos.top + ( show ? 0 : pos.ry * height ),
+						opacity: show ? 1 : 0
+					}, o.duration || 500, o.easing, childComplete );
 			}
 		}
 
@@ -69,9 +86,11 @@ $.effects.explode = function( o ) {
 		}
 
 		function animComplete() {
-			el.css({ visibility: 'visible' });
+			el.css({
+				visibility: 'visible'
+			});
 			$( peices ).remove();
-			if ( mode != 'show' ) {
+			if ( !show ) {
 				el.hide();
 			}
 			if ( $.isFunction( o.complete ) ) {