effect-fold.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /*!
  2. * jQuery UI Effects Fold 1.14.1
  3. * https://jqueryui.com
  4. *
  5. * Copyright OpenJS Foundation and other contributors
  6. * Released under the MIT license.
  7. * https://jquery.org/license
  8. */
  9. //>>label: Fold Effect
  10. //>>group: Effects
  11. //>>description: Folds an element first horizontally and then vertically.
  12. //>>docs: https://api.jqueryui.com/fold-effect/
  13. //>>demos: https://jqueryui.com/effect/
  14. ( function( factory ) {
  15. "use strict";
  16. if ( typeof define === "function" && define.amd ) {
  17. // AMD. Register as an anonymous module.
  18. define( [
  19. "jquery",
  20. "../version",
  21. "../effect"
  22. ], factory );
  23. } else {
  24. // Browser globals
  25. factory( jQuery );
  26. }
  27. } )( function( $ ) {
  28. "use strict";
  29. return $.effects.define( "fold", "hide", function( options, done ) {
  30. // Create element
  31. var element = $( this ),
  32. mode = options.mode,
  33. show = mode === "show",
  34. hide = mode === "hide",
  35. size = options.size || 15,
  36. percent = /([0-9]+)%/.exec( size ),
  37. horizFirst = !!options.horizFirst,
  38. ref = horizFirst ? [ "right", "bottom" ] : [ "bottom", "right" ],
  39. duration = options.duration / 2,
  40. placeholder = $.effects.createPlaceholder( element ),
  41. start = element.cssClip(),
  42. animation1 = { clip: $.extend( {}, start ) },
  43. animation2 = { clip: $.extend( {}, start ) },
  44. distance = [ start[ ref[ 0 ] ], start[ ref[ 1 ] ] ],
  45. queuelen = element.queue().length;
  46. if ( percent ) {
  47. size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ hide ? 0 : 1 ];
  48. }
  49. animation1.clip[ ref[ 0 ] ] = size;
  50. animation2.clip[ ref[ 0 ] ] = size;
  51. animation2.clip[ ref[ 1 ] ] = 0;
  52. if ( show ) {
  53. element.cssClip( animation2.clip );
  54. if ( placeholder ) {
  55. placeholder.css( $.effects.clipToBox( animation2 ) );
  56. }
  57. animation2.clip = start;
  58. }
  59. // Animate
  60. element
  61. .queue( function( next ) {
  62. if ( placeholder ) {
  63. placeholder
  64. .animate( $.effects.clipToBox( animation1 ), duration, options.easing )
  65. .animate( $.effects.clipToBox( animation2 ), duration, options.easing );
  66. }
  67. next();
  68. } )
  69. .animate( animation1, duration, options.easing )
  70. .animate( animation2, duration, options.easing )
  71. .queue( done );
  72. $.effects.unshift( element, queuelen, 4 );
  73. } );
  74. } );