[Summary view] [Print] [Text view]

   1  /*!
   2   * jQuery UI Effects Explode 1.9.2
   3   * http://jqueryui.com
   4   *
   5   * Copyright 2012 jQuery Foundation and other contributors
   6   * Released under the MIT license.
   7   * http://jquery.org/license
   8   *
   9   * http://api.jqueryui.com/explode-effect/
  10   *
  11   * Depends:
  12   *    jquery.ui.effect.js
  13   */
  14  (function( $, undefined ) {
  15  
  16  $.effects.effect.explode = function( o, done ) {
  17  
  18      var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3,
  19          cells = rows,
  20          el = $( this ),
  21          mode = $.effects.setMode( el, o.mode || "hide" ),
  22          show = mode === "show",
  23  
  24          // show and then visibility:hidden the element before calculating offset
  25          offset = el.show().css( "visibility", "hidden" ).offset(),
  26  
  27          // width and height of a piece
  28          width = Math.ceil( el.outerWidth() / cells ),
  29          height = Math.ceil( el.outerHeight() / rows ),
  30          pieces = [],
  31  
  32          // loop
  33          i, j, left, top, mx, my;
  34  
  35      // children animate complete:
  36  	function childComplete() {
  37          pieces.push( this );
  38          if ( pieces.length === rows * cells ) {
  39              animComplete();
  40          }
  41      }
  42  
  43      // clone the element for each row and cell.
  44      for( i = 0; i < rows ; i++ ) { // ===>
  45          top = offset.top + i * height;
  46          my = i - ( rows - 1 ) / 2 ;
  47  
  48          for( j = 0; j < cells ; j++ ) { // |||
  49              left = offset.left + j * width;
  50              mx = j - ( cells - 1 ) / 2 ;
  51  
  52              // Create a clone of the now hidden main element that will be absolute positioned
  53              // within a wrapper div off the -left and -top equal to size of our pieces
  54              el
  55                  .clone()
  56                  .appendTo( "body" )
  57                  .wrap( "<div></div>" )
  58                  .css({
  59                      position: "absolute",
  60                      visibility: "visible",
  61                      left: -j * width,
  62                      top: -i * height
  63                  })
  64  
  65              // select the wrapper - make it overflow: hidden and absolute positioned based on
  66              // where the original was located +left and +top equal to the size of pieces
  67                  .parent()
  68                  .addClass( "ui-effects-explode" )
  69                  .css({
  70                      position: "absolute",
  71                      overflow: "hidden",
  72                      width: width,
  73                      height: height,
  74                      left: left + ( show ? mx * width : 0 ),
  75                      top: top + ( show ? my * height : 0 ),
  76                      opacity: show ? 0 : 1
  77                  }).animate({
  78                      left: left + ( show ? 0 : mx * width ),
  79                      top: top + ( show ? 0 : my * height ),
  80                      opacity: show ? 1 : 0
  81                  }, o.duration || 500, o.easing, childComplete );
  82          }
  83      }
  84  
  85  	function animComplete() {
  86          el.css({
  87              visibility: "visible"
  88          });
  89          $( pieces ).remove();
  90          if ( !show ) {
  91              el.hide();
  92          }
  93          done();
  94      }
  95  };
  96  
  97  })(jQuery);