|
7
|
1 /*!
|
|
|
2 * jQuery UI Effects Explode 1.10.4
|
|
|
3 * http://jqueryui.com
|
|
|
4 *
|
|
|
5 * Copyright 2014 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);
|
