jBase-2/wiki/EFFECTS-Slide-(horizontal).md

• slideIn | slideOut | 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

$('#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

$('#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

$('.drawer').slideToggle();

// Toggle an off-canvas menu with a bouncy spring effect
$('.menu-toggle-btn').on('click', () => {
    $('.drawer').slideToggle({ 
        duration: 400, 
        bounce: true 
    });
});