|
1 /*! |
|
2 * jQuery UI Effects Explode 1.10.3 |
|
3 * http://jqueryui.com |
|
4 * |
|
5 * Copyright 2013 jQuery Foundation and other contributors |
|
6 * Released under the MIT license. |
|
7 * http://jquery.org/license |
|
8 * |
|
9 * http://api.jqueryui.com/explode-effect/ |
|
10 * |
|
11 * Depends: |
|
12 * jquery.ui.effect.js |
|
13 */ |
|
14 (function( $, undefined ) { |
|
15 |
|
16 $.effects.effect.explode = function( o, done ) { |
|
17 |
|
18 var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3, |
|
19 cells = rows, |
|
20 el = $( this ), |
|
21 mode = $.effects.setMode( el, o.mode || "hide" ), |
|
22 show = mode === "show", |
|
23 |
|
24 // show and then visibility:hidden the element before calculating offset |
|
25 offset = el.show().css( "visibility", "hidden" ).offset(), |
|
26 |
|
27 // width and height of a piece |
|
28 width = Math.ceil( el.outerWidth() / cells ), |
|
29 height = Math.ceil( el.outerHeight() / rows ), |
|
30 pieces = [], |
|
31 |
|
32 // loop |
|
33 i, j, left, top, mx, my; |
|
34 |
|
35 // children animate complete: |
|
36 function childComplete() { |
|
37 pieces.push( this ); |
|
38 if ( pieces.length === rows * cells ) { |
|
39 animComplete(); |
|
40 } |
|
41 } |
|
42 |
|
43 // clone the element for each row and cell. |
|
44 for( i = 0; i < rows ; i++ ) { // ===> |
|
45 top = offset.top + i * height; |
|
46 my = i - ( rows - 1 ) / 2 ; |
|
47 |
|
48 for( j = 0; j < cells ; j++ ) { // ||| |
|
49 left = offset.left + j * width; |
|
50 mx = j - ( cells - 1 ) / 2 ; |
|
51 |
|
52 // Create a clone of the now hidden main element that will be absolute positioned |
|
53 // within a wrapper div off the -left and -top equal to size of our pieces |
|
54 el |
|
55 .clone() |
|
56 .appendTo( "body" ) |
|
57 .wrap( "<div></div>" ) |
|
58 .css({ |
|
59 position: "absolute", |
|
60 visibility: "visible", |
|
61 left: -j * width, |
|
62 top: -i * height |
|
63 }) |
|
64 |
|
65 // select the wrapper - make it overflow: hidden and absolute positioned based on |
|
66 // where the original was located +left and +top equal to the size of pieces |
|
67 .parent() |
|
68 .addClass( "ui-effects-explode" ) |
|
69 .css({ |
|
70 position: "absolute", |
|
71 overflow: "hidden", |
|
72 width: width, |
|
73 height: height, |
|
74 left: left + ( show ? mx * width : 0 ), |
|
75 top: top + ( show ? my * height : 0 ), |
|
76 opacity: show ? 0 : 1 |
|
77 }).animate({ |
|
78 left: left + ( show ? 0 : mx * width ), |
|
79 top: top + ( show ? 0 : my * height ), |
|
80 opacity: show ? 1 : 0 |
|
81 }, o.duration || 500, o.easing, childComplete ); |
|
82 } |
|
83 } |
|
84 |
|
85 function animComplete() { |
|
86 el.css({ |
|
87 visibility: "visible" |
|
88 }); |
|
89 $( pieces ).remove(); |
|
90 if ( !show ) { |
|
91 el.hide(); |
|
92 } |
|
93 done(); |
|
94 } |
|
95 }; |
|
96 |
|
97 })(jQuery); |