diff --git a/EFFECTS-Slide-%28horizontal%29.md b/EFFECTS-Slide-%28horizontal%29.md new file mode 100644 index 0000000..4072130 --- /dev/null +++ b/EFFECTS-Slide-%28horizontal%29.md @@ -0,0 +1,101 @@ +* [`slideIn`](#usage-slideIn) | [`slideOut`](#usage-slideOut) | [`slideToggle`](#usage-slideToggle) + +--- + +## .slideIn + +**Description** +Displays the matched elements with a sliding motion (usually from left to right or by expanding width). + +**Parameters** +* `options` (Object, optional): Animation options. + * `duration` (Number): Duration in milliseconds (default is 300). + * `direction` (String): 'left' or 'right' (default is 'left'). + * `easing` (String): CSS transition timing function (default is 'cubic-bezier(0.4, 0.0, 0.2, 1)'). + * `bounce` (Boolean): If set to true, applies a dynamic spring-like curve that slightly overshoots the target before resting. + +**Returns** +* (jBase): Current instance. + +**Example** + +```javascript +$('#sidebar').slideIn({ duration: 400, direction: 'left' }); + +// 1. Shorthand syntax (Number) +$('#sidebar').slideIn(400); + +// 2. Slide in from the right with custom easing +$('#sidebar').slideIn({ + duration: 500, + direction: 'right', + easing: 'linear' +}); + +// 3. The new snappy bounce effect +$('#drawer').slideIn({ + duration: 600, + bounce: true +}); +``` + +--- + +## .slideOut + +**Description** +Hides the matched elements with a sliding motion (usually collapsing width or moving off-canvas). + +**Parameters** +* `options` (Object, optional): Animation options. + * `duration` (Number): Duration in milliseconds (default is 300). + * `direction` (String): 'left' or 'right' (default is 'left'). + * `easing` (String): CSS transition timing function. + * `bounce` (Boolean): If set to true, the element slightly pulls back before shooting off-canvas. + +**Returns** +* (jBase): Current instance. + +**Example** + +```javascript +$('#sidebar').slideOut({ duration: 400 }); + +// 1. Shorthand syntax (Number) +$('#sidebar').slideOut(400); + +// 2. Slide out to the right with bounce effect +$('#sidebar').slideOut({ + duration: 500, + direction: 'right', + bounce: true +}); + +``` + +--- + +## .slideToggle + +**Description** +Display or hide the matched elements with a horizontal sliding motion. + +**Parameters** +* `options` (Object | Number, optional): Animation options object, or a number representing the duration in milliseconds. Passes these options to either `slideIn` or `slideOut`. + +**Returns** +* (jBase): Current instance. + +**Example** + +```javascript +$('.drawer').slideToggle(); + +// Toggle an off-canvas menu with a bouncy spring effect +$('.menu-toggle-btn').on('click', () => { + $('.drawer').slideToggle({ + duration: 400, + bounce: true + }); +}); +``` \ No newline at end of file