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); |