* jQuery UI Effects Explode 1.12.1
* Copyright jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
//>>label: Explode Effect
// jscs:disable maximumLineLength
//>>description: Explodes an element in all directions into n pieces. Implodes an element to its original wholeness.
// jscs:enable maximumLineLength
//>>docs: http://api.jqueryui.com/explode-effect/
//>>demos: http://jqueryui.com/effect/
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
return $.effects.define( "explode", "hide", function( options, done ) {
var i, j, left, top, mx, my,
rows = options.pieces ? Math.round( Math.sqrt( options.pieces ) ) : 3,
// Show and then visibility:hidden the element before calculating offset
offset = element.show().css( "visibility", "hidden" ).offset(),
// Width and height of a piece
width = Math.ceil( element.outerWidth() / cells ),
height = Math.ceil( element.outerHeight() / rows ),
// Children animate complete:
function childComplete() {
if ( pieces.length === rows * cells ) {
// Clone the element for each row and cell.
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
// 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
.addClass( "ui-effects-explode" )
left: left + ( show ? mx * width : 0 ),
top: top + ( show ? my * height : 0 ),
left: left + ( show ? 0 : mx * width ),
top: top + ( show ? 0 : my * height ),
}, options.duration || 500, options.easing, childComplete );
function animComplete() {