Merge branch 'ticket-3968' of https://github.com/gnarf37/jquery-ui

Author: scottgonzalez

ui/jquery.effects.explode.js

@@ -18,60 +18,77 @@ $.effects.effect.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 ),
+			pieces = [],
+
+			// loop
+			i, j, left, top, mx, my;
 
 		// 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++ ) { // ===>
+			top = offset.top + i * height;
+			my = i - ( rows - 1 ) / 2 ;
+
+			for( j = 0; j < cells ; j++ ) { // |||
+				left = offset.left + j * width;
+				mx = j - ( cells - 1 ) / 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: left + ( show ? mx * width : 0 ),
+						top: top + ( show ? my * 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: left + ( show ? 0 : mx * width ),
+						top: top + ( show ? 0 : my * height ),
+						opacity: show ? 1 : 0
+					}, o.duration || 500, o.easing, childComplete );
 			}
 		}
 
 		// children animate complete:
 		function childComplete() {
-			peices.push( this );
-			if ( peices.length == rows * cells ) {
+			pieces.push( this );
+			if ( pieces.length == rows * cells ) {
 				animComplete();
 			}
 		}
 
 		function animComplete() {
-			el.css({ visibility: 'visible' });
-			$( peices ).remove();
-			if ( mode != 'show' ) {
+			el.css({
+				visibility: 'visible'
+			});
+			$( pieces ).remove();
+			if ( !show ) {
 				el.hide();
 			}
 			if ( $.isFunction( o.complete ) ) {