Showandhide command
Show something and then hide it again. You have full control over the specifics.
Basic Usage (HTML)
data-jkit="[showandhide:delay=2000;speed=500;duration=5000]"
Advanced Init (JavaScript)
$('#myelement').jKit('showandhide', { 'delay': '2000', 'speed': '500', 'duration': '5000' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| delay | Int (Milliseconds) | 0 | The delay before the element is shown |
| speed | Int or “fast”, “slow” (Milliseconds) | 500 | The duration of the animation in milliseconds, bigger = slower. |
| duration | Int (Milliseconds) | 10000 | The duration while the element is fully shown |
| animation | “fade”, “slide” or “none” | fade | The type of animation used for the transition |
| easing | String (“linear” or easing plugin option) | linear | The easing behavior of the animation |
Events
| Event | Description |
|---|---|
| shown | Triggered when the element is shown |
| complete | Triggered whenever the animation is finished |
Examples
Basic example:
Show element after 2 seconds for 5 seconds and than hide it again:
Text …
Source:
<div data-jkit="[showandhide:delay=2000;speed=500;duration=5000]">Text ...</div>
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]