resources/jquery.effects/jquery.effects.explode.js

   1 /*!
   2  * jQuery UI Effects Explode 1.8.24
   3  *
   4  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
   5  * Dual licensed under the MIT or GPL Version 2 licenses.
   6  * http://jquery.org/license
   7  *
   8  * http://docs.jquery.com/UI/Effects/Explode
   9  *
  10  * Depends:
  11  *      jquery.effects.core.js
  12  */
  13 (function( $, undefined ) {
  14
  15 $.effects.explode = function(o) {
  16
  17         return this.queue(function() {
  18
  19         var rows = o.options.pieces ? Math.round(Math.sqrt(o.options.pieces)) : 3;
  20         var cells = o.options.pieces ? Math.round(Math.sqrt(o.options.pieces)) : 3;
  21
  22         o.options.mode = o.options.mode == 'toggle' ? ($(this).is(':visible') ? 'hide' : 'show') : o.options.mode;
  23         var el = $(this).show().css('visibility', 'hidden');
  24         var offset = el.offset();
  25
  26         //Substract the margins - not fixing the problem yet.
  27         offset.top -= parseInt(el.css("marginTop"),10) || 0;
  28         offset.left -= parseInt(el.css("marginLeft"),10) || 0;
  29
  30         var width = el.outerWidth(true);
  31         var height = el.outerHeight(true);
  32
  33         for(var i=0;i<rows;i++) { // =
  34                 for(var j=0;j<cells;j++) { // ||
  35                         el
  36                                 .clone()
  37                                 .appendTo('body')
  38                                 .wrap('<div></div>')
  39                                 .css({
  40                                         position: 'absolute',
  41                                         visibility: 'visible',
  42                                         left: -j*(width/cells),
  43                                         top: -i*(height/rows)
  44                                 })
  45                                 .parent()
  46                                 .addClass('ui-effects-explode')
  47                                 .css({
  48                                         position: 'absolute',
  49                                         overflow: 'hidden',
  50                                         width: width/cells,
  51                                         height: height/rows,
  52                                         left: offset.left + j*(width/cells) + (o.options.mode == 'show' ? (j-Math.floor(cells/2))*(width/cells) : 0),
  53                                         top: offset.top + i*(height/rows) + (o.options.mode == 'show' ? (i-Math.floor(rows/2))*(height/rows) : 0),
  54                                         opacity: o.options.mode == 'show' ? 0 : 1
  55                                 }).animate({
  56                                         left: offset.left + j*(width/cells) + (o.options.mode == 'show' ? 0 : (j-Math.floor(cells/2))*(width/cells)),
  57                                         top: offset.top + i*(height/rows) + (o.options.mode == 'show' ? 0 : (i-Math.floor(rows/2))*(height/rows)),
  58                                         opacity: o.options.mode == 'show' ? 1 : 0
  59                                 }, o.duration || 500);
  60                 }
  61         }
  62
  63         // Set a timeout, to call the callback approx. when the other animations have finished
  64         setTimeout(function() {
  65
  66                 o.options.mode == 'show' ? el.css({ visibility: 'visible' }) : el.css({ visibility: 'visible' }).hide();
  67                                 if(o.callback) o.callback.apply(el[0]); // Callback
  68                                 el.dequeue();
  69
  70                                 $('div.ui-effects-explode').remove();
  71
  72         }, o.duration || 500);
  73
  74
  75         });
  76
  77 };
  78
  79 })(jQuery);