effect-explode.js (2882B)
1 /*! 2 * jQuery UI Effects Explode 1.12.1 3 * http://jqueryui.com 4 * 5 * Copyright jQuery Foundation and other contributors 6 * Released under the MIT license. 7 * http://jquery.org/license 8 */ 9 10 //>>label: Explode Effect 11 //>>group: Effects 12 // jscs:disable maximumLineLength 13 //>>description: Explodes an element in all directions into n pieces. Implodes an element to its original wholeness. 14 // jscs:enable maximumLineLength 15 //>>docs: http://api.jqueryui.com/explode-effect/ 16 //>>demos: http://jqueryui.com/effect/ 17 18 ( function( factory ) { 19 if ( typeof define === "function" && define.amd ) { 20 21 // AMD. Register as an anonymous module. 22 define( [ 23 "jquery", 24 "./effect" 25 ], factory ); 26 } else { 27 28 // Browser globals 29 factory( jQuery ); 30 } 31 }( function( $ ) { 32 33 return $.effects.define( "explode", "hide", function( options, done ) { 34 35 var i, j, left, top, mx, my, 36 rows = options.pieces ? Math.round( Math.sqrt( options.pieces ) ) : 3, 37 cells = rows, 38 element = $( this ), 39 mode = options.mode, 40 show = mode === "show", 41 42 // Show and then visibility:hidden the element before calculating offset 43 offset = element.show().css( "visibility", "hidden" ).offset(), 44 45 // Width and height of a piece 46 width = Math.ceil( element.outerWidth() / cells ), 47 height = Math.ceil( element.outerHeight() / rows ), 48 pieces = []; 49 50 // Children animate complete: 51 function childComplete() { 52 pieces.push( this ); 53 if ( pieces.length === rows * cells ) { 54 animComplete(); 55 } 56 } 57 58 // Clone the element for each row and cell. 59 for ( i = 0; i < rows; i++ ) { // ===> 60 top = offset.top + i * height; 61 my = i - ( rows - 1 ) / 2; 62 63 for ( j = 0; j < cells; j++ ) { // ||| 64 left = offset.left + j * width; 65 mx = j - ( cells - 1 ) / 2; 66 67 // Create a clone of the now hidden main element that will be absolute positioned 68 // within a wrapper div off the -left and -top equal to size of our pieces 69 element 70 .clone() 71 .appendTo( "body" ) 72 .wrap( "<div></div>" ) 73 .css( { 74 position: "absolute", 75 visibility: "visible", 76 left: -j * width, 77 top: -i * height 78 } ) 79 80 // Select the wrapper - make it overflow: hidden and absolute positioned based on 81 // where the original was located +left and +top equal to the size of pieces 82 .parent() 83 .addClass( "ui-effects-explode" ) 84 .css( { 85 position: "absolute", 86 overflow: "hidden", 87 width: width, 88 height: height, 89 left: left + ( show ? mx * width : 0 ), 90 top: top + ( show ? my * height : 0 ), 91 opacity: show ? 0 : 1 92 } ) 93 .animate( { 94 left: left + ( show ? 0 : mx * width ), 95 top: top + ( show ? 0 : my * height ), 96 opacity: show ? 1 : 0 97 }, options.duration || 500, options.easing, childComplete ); 98 } 99 } 100 101 function animComplete() { 102 element.css( { 103 visibility: "visible" 104 } ); 105 $( pieces ).remove(); 106 done(); 107 } 108 } ); 109 110 } ) );