Loading

Animations

Animations are a great way of adding motion and life to your UI, but please use sparingly! It's all too easy to over use animations making your website look tacky and slow. Check out the predefined animations below:


$('#element').animation('slideUp');
$('#element').animation('slideDown');
$('#element').animation('fadeIn');
$('#element').animation('fadeOut');
$('#element').animation('flipIn');
$('#element').animation('flipOut');
$('#element').animation('zoomIn');
$('#element').animation('zoomOut');
$('#element').animation('rotate');
$('#element').animation('shake');
$('#element').animation('pulse');
$('#element').animation('slideInRight');
$('#element').animation('slideInLeft');
$('#element').animation('slideInDown');
$('#element').animation('slideOutRight');
$('#element').animation('slideOutLeft');
$('#element').animation('slideOutUp');

Callback

$('#element').animation('fadeIn', function()
{
// code ...
});