Нет описания

effect-explode.js 2.8KB

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