template.js.base.jquery.ui.effect-explode.js Maven / Gradle / Ivy
/*!
* jQuery UI Effects Explode 1.10.4
* http://jqueryui.com
*
* Copyright 2014 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("")
.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);