jquery-animate.css
This plugin allows you to control css animations from jQuery taking advantage of callbacks and promises.
The css part is cloned from daneden/animate.css
Getting started
Import JS and the CSS files in your page:
<link rel="stylesheet" href="libs/jquery-animate.css/libs/animate.css" />
<script src="libs/jquery-animate.css/jquery-animate.css.js"></script>
Then simply perform an animation:
$(".target").animateCss('bounce');
Usage and features
This plugin has the following features:
$.fn.animateCss(effect /*string*/); //or $.fn.animateCss(effect /*string*/, options /*plainObject*/); //or $.fn.animateCss(effect /*string*/, callback /*function*/);
Options is a plain object:
{ delay : 0, // in milliseconds duration : 800, // in milliseconds callback : function() {}, // function with element scope queue : 'fx' // the queueName to be used }
duration
Option The duration of the CSS animation applied. Default value defined in CSS with animation-duration
property. If no defined, 1000ms is applied.
$(".target").animateCss('bounce', {duration: 500});
delay
Option The offset until animation begins.
$(".target").animateCss('bounce', {delay: 500});
callback
Option The callback which will be executed after animation ends. The plugin has an internal control to ensure callback is called even if animation does not exists.
It is also possible to use promise
to manage the callback or actions after animation.
$(".target").animateCss('bounce', { callback: function() { $(this).html("Callback!"); } });
Remember it is possible to pass callback directly as second argument:
$(".target").animateCss('bounce', function() { $(this).html("Callback!"); });
Promises and deferreds
This plugins uses the fx
queue so it is possible to use the promise to manage when the queue has ended.
$(".target").animateCss('bounce').promise() .then( function() { $(this).html("Promise resolved!"); } );
Remember you can modify the queueName
with the queue
option:
$(".target").animateCss('bounce', {queue : 'anim'}).promise('anim') .then( function() { $(this).html("Promise resolved!"); } );