[Summary view] [Print] [Text view]

   1  /*

   2   * jQuery UI Effects Explode 1.6

   3   *

   4   * Copyright (c) 2008 AUTHORS.txt (http://ui.jquery.com/about)

   5   * Dual licensed under the MIT (MIT-LICENSE.txt)

   6   * and GPL (GPL-LICENSE.txt) licenses.

   7   *

   8   * http://docs.jquery.com/UI/Effects/Explode

   9   *

  10   * Depends:

  11   *    effects.core.js

  12   */
  13  (function($) {
  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")) || 0;
  28      offset.left -= parseInt(el.css("marginLeft")) || 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('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                  $('.effects-explode').remove();
  71  
  72      }, o.duration || 500);
  73  
  74  
  75      });
  76  
  77  };
  78  
  79  })(jQuery);