mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
37dcc3e21d
For instance, this is useful for the jquery-ui-rails gem, which does not use jQuery UI's own minification, but relies on Rails to minify the files where necessary. Rails in turn uses UglifyJS for JS and YUI for CSS, both of which respect the /*! ... */ convention.
97 lines
2.4 KiB
JavaScript
97 lines
2.4 KiB
JavaScript
/*!
|
|
* jQuery UI Effects Explode @VERSION
|
|
*
|
|
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
* http://jquery.org/license
|
|
*
|
|
* http://docs.jquery.com/UI/Effects/Explode
|
|
*
|
|
* Depends:
|
|
* jquery.effects.core.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;
|
|
|
|
// 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 );
|
|
}
|
|
}
|
|
|
|
// children animate complete:
|
|
function childComplete() {
|
|
pieces.push( this );
|
|
if ( pieces.length == rows * cells ) {
|
|
animComplete();
|
|
}
|
|
}
|
|
|
|
function animComplete() {
|
|
el.css({
|
|
visibility: "visible"
|
|
});
|
|
$( pieces ).remove();
|
|
if ( !show ) {
|
|
el.hide();
|
|
}
|
|
done();
|
|
}
|
|
};
|
|
|
|
})(jQuery);
|