114 lines
2.9 KiB
Markdown
114 lines
2.9 KiB
Markdown
|
* [`fadeIn` / `show`](#usage-fadeIn) | [`fadeOut` / `hide`](#usage-fadeOut) | [`fadeToggle`](#usage-fadeToggle)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## <a id="usage-fadeIn"></a>.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**
|
||
|
|
```javascript
|
||
|
|
// 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
|
||
|
|
});
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## <a id="usage-fadeOut"></a>.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**
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
$('.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'
|
||
|
|
});
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## <a id="usage-fadeToggle"></a>.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 either `fadeIn` or `fadeOut`.
|
||
|
|
|
||
|
|
**Returns**
|
||
|
|
|
||
|
|
* (jBase): Current instance.
|
||
|
|
|
||
|
|
**Example**
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// 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
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
```
|