Tweet



 
A very easy to use, cross platform, jQuery based UI toolkit, that's still small in size, has the features you need, and doesn't get in your way of doing things! Put jQuery and jKit on all your pages and HTML becomes so much better. And the best thing? You really don't have to be a programmer to create a trully amazing website! jKit has 99% of all the features you ever need. You don't have to check out dozens of plugins, learn how to use them, only to find out they don't work in a specific browser. And even if jKit doesn't have that one feature you need right now, jKit is fully extendable with plugins and command replacements, all that and your API always stays the same.

Hi, stranger

jKit is growing almost daily, if you don't find what you need, let us know with a post on the community forum or our social pages. Hey, who knows, maybe it's already on our ToDo list.

Content Summary

jKit Button

If you like jKit, use and want to support the project, here's a small button you can use to link to the jKit website.

Btw, if you did something really nice with jKit, send us a link to your work and if we like it, we would sure love to feature it.

Animation command

Tween between different elements (frames) to create an animation.

Basic Usage (HTML)

data-jkit="[animation:delay=4000;speed=slow;to=width(50%),height(50px)]"

Advanced Init (JavaScript)

$('#myelement').jKit('animation', { 'delay': '4000', 'speed': 'slow', 'to': 'width(50%),height(50px)' });

Options

OptionValuesDefaultDescription
fpsInt25The frames per second of the animation
loop"yes" or "no"noPlay the animation only once or in a loop?
delayInt (Milliseconds)0The delay before the animation starts
speedInt or "fast", "slow" (Milliseconds)500The duration of the animation in milliseconds, bigger = slower.
easingString ("linear" or easing plugin option)linearThe easing behavior of the animation
fromjKit CSS String, example: "margin-top(20px),height(50px)"Animate from this CSS (optional)
tojKit CSS StringAnimate to this CSS (if you leave this empty, keyframe animation is used)
onjQuery event ("click", "mouseover", "mouseout" ...)The event used to start the animation. Leave it empty for immediate start
macroMacro nameThis optional macro will be applied to the element after the animation has finished

Events

EventDescription
completeTriggered when the animation is finished
showframeTriggered on each frame
showframeNTriggered on a specific frame where "N" is the frame number

Examples

CSS animation overview:

An example showing most of the options:

After four seconds ...

On click ...

On mouseenter and mouseleave ...

Source:
<p class="demobox" data-jkit="[animation:delay=4000;speed=500;to=width(50%),height(50px)]">
	After four seconds ...
</p>
<p class="demobox" data-jkit="[animation:on=click;speed=500;to=width(50%),height(50px)]">
	On click ...
</p>
<p class="demobox" data-jkit="[animation:on=mouseenter;speed=250;to=width(50%),height(110px)][animation:on=mouseleave;speed=250;to=width(100%),height(100px)]">
	On mouseenter and mouseleave ...
</p>

Keyframe animation overview:

An example showing most of the options:

jKit
animation
made
easy
easy
really easy!
Source:
<div class="animation-container" data-jkit="[animation:fps=30;loop=yes]">
	<div class="animation" data-jkit="[frame:steps=100;action=fadeout]" style="font-size:90px;background:#000"><img src="../img/jkit_logo.png" alt="jKit" title="jKit" style="margin-top:110px"></div>
	<div class="animation" data-jkit="[frame:steps=7]" style="font-size:90px;line-height:260%">animation</div>
	<div class="animation" data-jkit="[frame:steps=10]" style="font-size:90px;line-height:260%">made</div>
	<div class="animation" data-jkit="[frame:steps=50;action=tween;easing=easeOutBounce]" style="font-size:200px;padding-top:110px">easy</div>
	<div class="animation" data-jkit="[frame:steps=1]" style="font-size:20px;opacity:0;padding-top:110px">easy</div>
	<div class="animation" data-jkit="[frame:steps=25]"></div>
	<div class="animation" data-jkit="[frame:steps=75;action=fadeinout]" style="font-size:50px;line-height:500%;color:#E01B49;background:#fff">really easy!</div>
	<div class="animation" data-jkit="[frame:steps=50]"></div>
	<div class="animation" data-jkit="[frame:steps=50;action=fadein]" style="background:#000"></div>
</div>

Example CSS

div.animation-container {
	position: relative;
	width: 100%;
	height: 250px;
	background: #333;
	font-family: "Arial Black", Arial, sans;
	letter-spacing: 2px;
}
div.animation-container div.animation {
	height: 250px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

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 ]