effect-slide.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /*!
  2. * jQuery UI Effects Slide 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: Slide Effect
  10. //>>group: Effects
  11. //>>description: Slides an element in and out of the viewport.
  12. //>>docs: https://api.jqueryui.com/slide-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( "slide", "show", function( options, done ) {
  30. var startClip, startRef,
  31. element = $( this ),
  32. map = {
  33. up: [ "bottom", "top" ],
  34. down: [ "top", "bottom" ],
  35. left: [ "right", "left" ],
  36. right: [ "left", "right" ]
  37. },
  38. mode = options.mode,
  39. direction = options.direction || "left",
  40. ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
  41. positiveMotion = ( direction === "up" || direction === "left" ),
  42. distance = options.distance ||
  43. element[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ),
  44. animation = {};
  45. $.effects.createPlaceholder( element );
  46. startClip = element.cssClip();
  47. startRef = element.position()[ ref ];
  48. // Define hide animation
  49. animation[ ref ] = ( positiveMotion ? -1 : 1 ) * distance + startRef;
  50. animation.clip = element.cssClip();
  51. animation.clip[ map[ direction ][ 1 ] ] = animation.clip[ map[ direction ][ 0 ] ];
  52. // Reverse the animation if we're showing
  53. if ( mode === "show" ) {
  54. element.cssClip( animation.clip );
  55. element.css( ref, animation[ ref ] );
  56. animation.clip = startClip;
  57. animation[ ref ] = startRef;
  58. }
  59. // Actually animate
  60. element.animate( animation, {
  61. queue: false,
  62. duration: options.duration,
  63. easing: options.easing,
  64. complete: done
  65. } );
  66. } );
  67. } );