Show command
Show something at a specific time after pageload, and animated if needed.
Basic Usage (HTML)
data-jkit="[show:delay=5000;speed=slow]"
Advanced Init (JavaScript)
$('#myelement').jKit('show', { 'delay': '5000', 'speed': 'slow' });
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. |
| 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 |
|---|---|
| complete | Triggered whenever the animation is finished |
Examples
Basic example:
Show element after two seconds:
Text …
Source:
<div data-jkit="[show:delay=2000;speed=500;animation=fade]">Text ...</div>
Advanced example:
In this advanced example we are using a dynamic delay to fade in boxes at different times:
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
Source:
<div data-jkit="[show:target=children.div;delay={rand|500-3000}]">
<div class="demosquare">Box 1</div>
<div class="demosquare">Box 2</div>
<div class="demosquare">Box 3</div>
<div class="demosquare">Box 4</div>
<div class="demosquare">Box 5</div>
<div class="demosquare">Box 6</div>
<div class="demosquare">Box 7</div>
<div class="demosquare">Box 8</div>
<div class="demosquare">Box 9</div>
<div class="demosquare">Box 10</div>
</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 ]