Animation

Although it is quite easy to overuse animation effects, Kube makes it pretty easy to create meaningful, smooth and overall nice looking animation. Feel free to click every button below to see what it does, and then only use those effects that are essential to your project.

Slide

slideUp

Slide Up Slide Down

$(’#element’).animation(‘slideUp’);
$(’#element’).animation(‘slideDown’);

Fade

fadeOut

Fade In Fade Out

$(’#element’).animation(‘fadeIn’);
$(’#element’).animation(‘fadeOut’);

Flip

flipOut

Flip In Flip Out

$(’#element’).animation(‘flipIn’);
$(’#element’).animation(‘flipOut’);

Zoom

zoomOut

Zoom In Zoom Out

$(’#element’).animation(‘zoomIn’);
$(’#element’).animation(‘zoomOut’);

Rotate

rotate

Rotate

$(’#element’).animation(‘rotate’);

Shake

shake

Shake

$(’#element’).animation(‘shake’);

Pulse

pulse

Pulse

$(’#element’).animation(‘pulse’);

Slide In

Slide In Right Slide In Left Slide In Down

$(’#element’).animation(‘slideInRight’);
$(’#element’).animation(‘slideInLeft’);
$(’#element’).animation(‘slideInDown’);

Slide Out

slideOutRight

slideOutLeft

slideOutUp

Slide Out Right Slide Out Left Slide Out Up

$(’#element’).animation(‘slideOutRight’);
$(’#element’).animation(‘slideOutLeft’);
$(’#element’).animation(‘slideOutUp’);

Callback

$(’#element’).animation(‘fadeIn’, function()
{
    // code …
});