Animate any element

I created a custom animation function to add short animations to elements. The elements will be animated with CSS keyframes rather than with the build in animation function from jQuery.

The code

Check out the following fiddle which has all the JavaScript, HTML and CSS you need:

Demo

To animate an element, simply use the function animate(element, animation, complete) and pass the target jQuery element and the name of the animation. You can use the animations tada, tadaSmall, flash, shake, pulseUp, pulseDown, popIn and popOut.

<button id="target-tada" onclick="animateEl($('#target-tada'), 'tada')">Tada</button>
<button id="target-shake" onclick="animateEl($('#target-shake'), 'shake')">Shake</button>

You can pass a function as the complete argument, which will get triggered when the animation is finished. Also, it's a good idea to use the popIn or fadeIn animations when you create an element:

<button onclick="animateEl($('<div/>', {id: 'target'}).appendTo($('body')), 'popIn')">Pop In</button>
<button onclick="animateEl($('#target'), 'popOut', function () { $('#target').remove(); })">Pop Out</button>

I like to use the pulseUp and pulseDown animations in compination with numbers:

<button onclick="$('#target').html(parseInt($('#target').html()) + 1); animateEl($('#target'), 'pulseUp')">+1</button>
<button onclick="$('#target').html(parseInt($('#target').html()) - 1); animateEl($('#target'), 'pulseDown')">-1</button>
<div id="target">100</div>