Loop command
The new blink tag, just animated. Use it on your own risk.
Basic Usage (HTML)
data-jkit="[loop:speed1=2000;duration1=5000;speed2=2000;duration2=5000]"
Advanced Init (JavaScript)
$('#myelement').jKit('loop', { 'speed1': '2000', 'duration1': '5000', 'speed2': '2000', 'duration2': '5000' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| speed1 | Int or “fast”, “slow” (Milliseconds) | 500 | The duration of the 1st animation in milliseconds, bigger = slower. |
| speed2 | Int or “fast”, “slow” (Milliseconds) | 500 | The duration of 2nd the animation in milliseconds, bigger = slower. |
| duration1 | Int (Milliseconds) | 2000 | The duration while the element is fully shown |
| duration2 | Int (Milliseconds) | 2000 | The duration while the element is fully hidden |
| easing1 | String (“linear” or easing plugin option) | linear | The easing behavior of the first part of the animation |
| easing2 | String (“linear” or easing plugin option) | linear | The easing behavior of the second part of the animation |
| animation | “fade”, “slide” or “none” | fade | The type of animation used for the transition |
Events
| Event | Description |
|---|---|
| show | Triggered when the lement is shown |
| hide | Triggered when the element is hidden |
Examples
Basic example:
If you really want to let something blink, at least make it with style:
Text …
Source:
<div data-jkit="[loop:speed1=2000;duration1=250;speed2=250;duration2=2000]">Text ...</div>
Advanced example:
In this advanced example we are using a dynamic delay to loop boxes with random values:
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
Source:
<div data-jkit="[loop:target=children.div;speed1={rand|500-1500};duration2={rand|500-2500};speed2={rand|500-1500};duration1={rand|500-2500}]">
<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 ]