2.9 KiB
2.9 KiB
.fadeIn (Alias: .show)
Description Display the matched elements by fading them to opaque (opacity: 1).
Parameters
options(Object, optional): Animation options.duration(Number): Animation runtime in milliseconds (default is 300).displayType(String): The CSS display value to set before fading (default is 'block').easing(String): CSS transition timing function (e.g., 'linear', 'ease-in-out').bounce(Boolean): If set to true, applies a dynamic cubic-bezier curve and scale transformation for a spring-like effect.
Returns
- (jBase): Current instance.
Example
// 1. Shorthand syntax (Number)
$('div.hidden').fadeIn(400);
// 2. Custom display type and easing
$('.modal').show({
duration: 600,
displayType: 'flex',
easing: 'linear'
});
// 3. The new snappy bounce effect
$('.alert').fadeIn({
duration: 500,
bounce: true
});
.fadeOut (Alias: .hide)
Description Hide the matched elements by fading them to transparent (opacity: 0). Once complete, the display property is often set to 'none'.
Parameters
options(Object, optional): Animation options.duration(Number, optional): Duration in milliseconds.easing(String): CSS transition timing function (e.g., 'linear', 'ease-in-out').bounce(Boolean): If set to true, applies a spring-like 'back-in' animation before disappearing.
Returns
- (jBase): Current instance.
Example
$('.alert-box').fadeOut({ duration: 300 });
// 1. Shorthand syntax (Number)
$('.alert-box').fadeOut(300);
// Use the alias with custom duration
$('.modal').hide({ duration: 500 });
// 2. Hide with custom easing
$('.modal').hide({
duration: 500,
easing: 'ease-out'
});
.fadeToggle (Alias: .toggle)
Description Display or hide the matched elements by intelligently animating their opacity based on their current computed display state.
Parameters
options(Object, optional): Animation options.duration(Object | Number, optional): Animation options object, or a number representing the duration in milliseconds. Passes these options to eitherfadeInorfadeOut.
Returns
- (jBase): Current instance.
Example
// Toggle visibility on click
$('#toggle-btn').click(() => {
$('.content').fadeToggle({ duration: 200 });
});
// 1. Simple toggle with shorthand syntax
$('#toggle-btn').on('click', () => {
$('.content').fadeToggle(200);
});
// 2. Toggle with modern bounce effect
$('#menu-btn').on('click', () => {
$('.dropdown').toggle({
duration: 400,
bounce: true
});
});