effect-slide.js (1915B)
1 /*! 2 * jQuery UI Effects Slide 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 10 //>>label: Slide Effect 11 //>>group: Effects 12 //>>description: Slides an element in and out of the viewport. 13 //>>docs: http://api.jqueryui.com/slide-effect/ 14 //>>demos: http://jqueryui.com/effect/ 15 16 ( function( factory ) { 17 if ( typeof define === "function" && define.amd ) { 18 19 // AMD. Register as an anonymous module. 20 define( [ 21 "jquery", 22 "./effect" 23 ], factory ); 24 } else { 25 26 // Browser globals 27 factory( jQuery ); 28 } 29 }( function( $ ) { 30 31 return $.effects.define( "slide", "show", function( options, done ) { 32 var startClip, startRef, 33 element = $( this ), 34 map = { 35 up: [ "bottom", "top" ], 36 down: [ "top", "bottom" ], 37 left: [ "right", "left" ], 38 right: [ "left", "right" ] 39 }, 40 mode = options.mode, 41 direction = options.direction || "left", 42 ref = ( direction === "up" || direction === "down" ) ? "top" : "left", 43 positiveMotion = ( direction === "up" || direction === "left" ), 44 distance = options.distance || 45 element[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ), 46 animation = {}; 47 48 $.effects.createPlaceholder( element ); 49 50 startClip = element.cssClip(); 51 startRef = element.position()[ ref ]; 52 53 // Define hide animation 54 animation[ ref ] = ( positiveMotion ? -1 : 1 ) * distance + startRef; 55 animation.clip = element.cssClip(); 56 animation.clip[ map[ direction ][ 1 ] ] = animation.clip[ map[ direction ][ 0 ] ]; 57 58 // Reverse the animation if we're showing 59 if ( mode === "show" ) { 60 element.cssClip( animation.clip ); 61 element.css( ref, animation[ ref ] ); 62 animation.clip = startClip; 63 animation[ ref ] = startRef; 64 } 65 66 // Actually animate 67 element.animate( animation, { 68 queue: false, 69 duration: options.duration, 70 easing: options.easing, 71 complete: done 72 } ); 73 } ); 74 75 } ) );