A jQuery plugin to dynamically apply Dan Eden's animate.css animations with callbacks
Download the production version or the development version.
In your web page:
<script src="jquery.js"></script>
<script src="dist/animatecss.min.js"></script>
<script>
$(document).ready( function(){
$('#your-id').animateCSS("fadeIn");
});
</script>{
infinite: false, // True or False
animationClass: "animate", // Can be any class
delay: 0 // Can be any value (in ms)
callback: // Any function
}When using infinite: true and a delay, the delay will only occur before the first loop
$('#your-id').animateCSS('fadeIn');$('#your-id').animateCSS('fadeIn', function(){
alert('Boom! Animation Complete');
});$('#your-id').animateCSS('fadeIn', {delay: 500});$('#your-id').animateCSS('fadeIn', {
delay: 1000,
callback: function(){
alert('Boom! Animation Complete');
}
});If you want to hide an element when the page loads and then apply an effect, it might look something like this:
.js #your-id {
visibility:hidden;
}$(window).load( function(){
$('#your-id').animateCSS('fadeIn', function(){
alert('Boom! Animation Complete');
});
});1.1.0
- Rewrite in CoffeeScript
- Allow custom
.animatedclass - Allow for
.infiniteanimation - Add grunt for consistent build output
- Add Bower support