You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.3 KiB
97 lines
2.3 KiB
/*! |
|
* jQuery UI Effects Explode 1.10.3 |
|
* http://jqueryui.com |
|
* |
|
* Copyright 2013 jQuery Foundation and other contributors |
|
* Released under the MIT license. |
|
* http://jquery.org/license |
|
* |
|
* http://api.jqueryui.com/explode-effect/ |
|
* |
|
* Depends: |
|
* jquery.ui.effect.js |
|
*/ |
|
(function( $, undefined ) { |
|
|
|
$.effects.effect.explode = function( o, done ) { |
|
|
|
var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3, |
|
cells = rows, |
|
el = $( this ), |
|
mode = $.effects.setMode( el, o.mode || "hide" ), |
|
show = mode === "show", |
|
|
|
// show and then visibility:hidden the element before calculating offset |
|
offset = el.show().css( "visibility", "hidden" ).offset(), |
|
|
|
// width and height of a piece |
|
width = Math.ceil( el.outerWidth() / cells ), |
|
height = Math.ceil( el.outerHeight() / rows ), |
|
pieces = [], |
|
|
|
// loop |
|
i, j, left, top, mx, my; |
|
|
|
// 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 |
|
el |
|
.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 |
|
}, o.duration || 500, o.easing, childComplete ); |
|
} |
|
} |
|
|
|
function animComplete() { |
|
el.css({ |
|
visibility: "visible" |
|
}); |
|
$( pieces ).remove(); |
|
if ( !show ) { |
|
el.hide(); |
|
} |
|
done(); |
|
} |
|
}; |
|
|
|
})(jQuery);
|
|
|