1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
/*!
* jQuery UI Effects Explode @VERSION
* http://jqueryui.com
*
* Copyright 2014 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*/
//>>label: Explode Effect
//>>group: Effects
//>>description: Explodes an element in all directions into n pieces. Implodes an element to its original wholeness.
//>>docs: http://api.jqueryui.com/explode-effect/
//>>demos: http://jqueryui.com/effect/
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([
"jquery",
"./effect"
], factory );
} else {
// Browser globals
factory( jQuery );
}
}(function( $ ) {
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,
cells = rows,
element = $( this ),
mode = options.mode,
show = mode === "show",
// 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 ),
pieces = [];
// children animate complete:
function childComplete() {
pieces.push( this );
if ( pieces.length === rows * cells ) {
animComplete();
}
}
// 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
element
.clone()
.appendTo( "body" )
.wrap( "<div></div>" )
.css({
position: "absolute",
visibility: "visible",
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" )
.css({
position: "absolute",
overflow: "hidden",
width: width,
height: height,
left: left + ( show ? mx * width : 0 ),
top: top + ( show ? my * height : 0 ),
opacity: show ? 0 : 1
}).animate({
left: left + ( show ? 0 : mx * width ),
top: top + ( show ? 0 : my * height ),
opacity: show ? 1 : 0
}, options.duration || 500, options.easing, childComplete );
}
}
function animComplete() {
element.css({
visibility: "visible"
});
$( pieces ).remove();
done();
}
});
}));
|
