jquery.ui.effect-explode.js 2.4KB

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