暫無描述

effect-size.js 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /*!
  2. * jQuery UI Effects Size 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: Size Effect
  10. //>>group: Effects
  11. //>>description: Resize an element to a specified width and height.
  12. //>>docs: http://api.jqueryui.com/size-effect/
  13. //>>demos: http://jqueryui.com/effect/
  14. ( function( factory ) {
  15. if ( typeof define === "function" && define.amd ) {
  16. // AMD. Register as an anonymous module.
  17. define( [
  18. "jquery",
  19. "./effect"
  20. ], factory );
  21. } else {
  22. // Browser globals
  23. factory( jQuery );
  24. }
  25. }( function( $ ) {
  26. return $.effects.define( "size", function( options, done ) {
  27. // Create element
  28. var baseline, factor, temp,
  29. element = $( this ),
  30. // Copy for children
  31. cProps = [ "fontSize" ],
  32. vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ],
  33. hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ],
  34. // Set options
  35. mode = options.mode,
  36. restore = mode !== "effect",
  37. scale = options.scale || "both",
  38. origin = options.origin || [ "middle", "center" ],
  39. position = element.css( "position" ),
  40. pos = element.position(),
  41. original = $.effects.scaledDimensions( element ),
  42. from = options.from || original,
  43. to = options.to || $.effects.scaledDimensions( element, 0 );
  44. $.effects.createPlaceholder( element );
  45. if ( mode === "show" ) {
  46. temp = from;
  47. from = to;
  48. to = temp;
  49. }
  50. // Set scaling factor
  51. factor = {
  52. from: {
  53. y: from.height / original.height,
  54. x: from.width / original.width
  55. },
  56. to: {
  57. y: to.height / original.height,
  58. x: to.width / original.width
  59. }
  60. };
  61. // Scale the css box
  62. if ( scale === "box" || scale === "both" ) {
  63. // Vertical props scaling
  64. if ( factor.from.y !== factor.to.y ) {
  65. from = $.effects.setTransition( element, vProps, factor.from.y, from );
  66. to = $.effects.setTransition( element, vProps, factor.to.y, to );
  67. }
  68. // Horizontal props scaling
  69. if ( factor.from.x !== factor.to.x ) {
  70. from = $.effects.setTransition( element, hProps, factor.from.x, from );
  71. to = $.effects.setTransition( element, hProps, factor.to.x, to );
  72. }
  73. }
  74. // Scale the content
  75. if ( scale === "content" || scale === "both" ) {
  76. // Vertical props scaling
  77. if ( factor.from.y !== factor.to.y ) {
  78. from = $.effects.setTransition( element, cProps, factor.from.y, from );
  79. to = $.effects.setTransition( element, cProps, factor.to.y, to );
  80. }
  81. }
  82. // Adjust the position properties based on the provided origin points
  83. if ( origin ) {
  84. baseline = $.effects.getBaseline( origin, original );
  85. from.top = ( original.outerHeight - from.outerHeight ) * baseline.y + pos.top;
  86. from.left = ( original.outerWidth - from.outerWidth ) * baseline.x + pos.left;
  87. to.top = ( original.outerHeight - to.outerHeight ) * baseline.y + pos.top;
  88. to.left = ( original.outerWidth - to.outerWidth ) * baseline.x + pos.left;
  89. }
  90. element.css( from );
  91. // Animate the children if desired
  92. if ( scale === "content" || scale === "both" ) {
  93. vProps = vProps.concat( [ "marginTop", "marginBottom" ] ).concat( cProps );
  94. hProps = hProps.concat( [ "marginLeft", "marginRight" ] );
  95. // Only animate children with width attributes specified
  96. // TODO: is this right? should we include anything with css width specified as well
  97. element.find( "*[width]" ).each( function() {
  98. var child = $( this ),
  99. childOriginal = $.effects.scaledDimensions( child ),
  100. childFrom = {
  101. height: childOriginal.height * factor.from.y,
  102. width: childOriginal.width * factor.from.x,
  103. outerHeight: childOriginal.outerHeight * factor.from.y,
  104. outerWidth: childOriginal.outerWidth * factor.from.x
  105. },
  106. childTo = {
  107. height: childOriginal.height * factor.to.y,
  108. width: childOriginal.width * factor.to.x,
  109. outerHeight: childOriginal.height * factor.to.y,
  110. outerWidth: childOriginal.width * factor.to.x
  111. };
  112. // Vertical props scaling
  113. if ( factor.from.y !== factor.to.y ) {
  114. childFrom = $.effects.setTransition( child, vProps, factor.from.y, childFrom );
  115. childTo = $.effects.setTransition( child, vProps, factor.to.y, childTo );
  116. }
  117. // Horizontal props scaling
  118. if ( factor.from.x !== factor.to.x ) {
  119. childFrom = $.effects.setTransition( child, hProps, factor.from.x, childFrom );
  120. childTo = $.effects.setTransition( child, hProps, factor.to.x, childTo );
  121. }
  122. if ( restore ) {
  123. $.effects.saveStyle( child );
  124. }
  125. // Animate children
  126. child.css( childFrom );
  127. child.animate( childTo, options.duration, options.easing, function() {
  128. // Restore children
  129. if ( restore ) {
  130. $.effects.restoreStyle( child );
  131. }
  132. } );
  133. } );
  134. }
  135. // Animate
  136. element.animate( to, {
  137. queue: false,
  138. duration: options.duration,
  139. easing: options.easing,
  140. complete: function() {
  141. var offset = element.offset();
  142. if ( to.opacity === 0 ) {
  143. element.css( "opacity", from.opacity );
  144. }
  145. if ( !restore ) {
  146. element
  147. .css( "position", position === "static" ? "relative" : position )
  148. .offset( offset );
  149. // Need to save style here so that automatic style restoration
  150. // doesn't restore to the original styles from before the animation.
  151. $.effects.saveStyle( element );
  152. }
  153. done();
  154. }
  155. } );
  156. } );
  157. } ) );