mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
98 lines
2.4 KiB
JavaScript
98 lines
2.4 KiB
JavaScript
/*!
|
|
* jQuery UI Effects Explode @VERSION
|
|
* http://jqueryui.com
|
|
*
|
|
* Copyright 2012 jQuery Foundation and other contributors
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
* http://jquery.org/license
|
|
*
|
|
* http://docs.jquery.com/UI/Effects/Explode
|
|
*
|
|
* 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);
|