mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
80 lines
1.9 KiB
JavaScript
80 lines
1.9 KiB
JavaScript
/*!
|
|
* jQuery UI Effects Slide @VERSION
|
|
* https://jqueryui.com
|
|
*
|
|
* Copyright OpenJS Foundation and other contributors
|
|
* Released under the MIT license.
|
|
* https://jquery.org/license
|
|
*/
|
|
|
|
//>>label: Slide Effect
|
|
//>>group: Effects
|
|
//>>description: Slides an element in and out of the viewport.
|
|
//>>docs: https://api.jqueryui.com/slide-effect/
|
|
//>>demos: https://jqueryui.com/effect/
|
|
|
|
( function( factory ) {
|
|
"use strict";
|
|
|
|
if ( typeof define === "function" && define.amd ) {
|
|
|
|
// AMD. Register as an anonymous module.
|
|
define( [
|
|
"jquery",
|
|
"../version",
|
|
"../effect"
|
|
], factory );
|
|
} else {
|
|
|
|
// Browser globals
|
|
factory( jQuery );
|
|
}
|
|
} )( function( $ ) {
|
|
"use strict";
|
|
|
|
return $.effects.define( "slide", "show", function( options, done ) {
|
|
var startClip, startRef,
|
|
element = $( this ),
|
|
map = {
|
|
up: [ "bottom", "top" ],
|
|
down: [ "top", "bottom" ],
|
|
left: [ "right", "left" ],
|
|
right: [ "left", "right" ]
|
|
},
|
|
mode = options.mode,
|
|
direction = options.direction || "left",
|
|
ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
|
|
positiveMotion = ( direction === "up" || direction === "left" ),
|
|
distance = options.distance ||
|
|
element[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ),
|
|
animation = {};
|
|
|
|
$.effects.createPlaceholder( element );
|
|
|
|
startClip = element.cssClip();
|
|
startRef = element.position()[ ref ];
|
|
|
|
// Define hide animation
|
|
animation[ ref ] = ( positiveMotion ? -1 : 1 ) * distance + startRef;
|
|
animation.clip = element.cssClip();
|
|
animation.clip[ map[ direction ][ 1 ] ] = animation.clip[ map[ direction ][ 0 ] ];
|
|
|
|
// Reverse the animation if we're showing
|
|
if ( mode === "show" ) {
|
|
element.cssClip( animation.clip );
|
|
element.css( ref, animation[ ref ] );
|
|
animation.clip = startClip;
|
|
animation[ ref ] = startRef;
|
|
}
|
|
|
|
// Actually animate
|
|
element.animate( animation, {
|
|
queue: false,
|
|
duration: options.duration,
|
|
easing: options.easing,
|
|
complete: done
|
|
} );
|
|
} );
|
|
|
|
} );
|