https://github.com/craigmdennis/animatecss
jQuery plugin to dynamically apply animate.css animations
https://github.com/craigmdennis/animatecss
Last synced: 6 days ago
JSON representation
jQuery plugin to dynamically apply animate.css animations
- Host: GitHub
- URL: https://github.com/craigmdennis/animatecss
- Owner: craigmdennis
- License: mit
- Created: 2011-12-10T02:14:02.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2017-10-01T16:44:51.000Z (over 7 years ago)
- Last Synced: 2025-05-07T06:05:21.104Z (6 days ago)
- Language: JavaScript
- Homepage:
- Size: 768 KB
- Stars: 152
- Watchers: 12
- Forks: 47
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Animate CSS jQuery Plugin
A jQuery plugin to dynamically apply [Dan Eden's animate.css][animate.css] animations with callbacks
[animate.css]: http://daneden.github.io/animate.css/
[](https://codeclimate.com/github/craigmdennis/animateCSS)
## Getting Started
### Bower
Install with [Bower][bower]
`bower install animateCSS`
[bower]: http://bower.io/
### Download
Download the [production version][min] or the [development version][max].
[min]: https://raw.github.com/craigmdennis/animateCSS/master/dist/jquery.animatecss.min.js
[max]: https://raw.github.com/craigmdennis/animateCSS/master/dist/jquery.animatecss.js
In your web page:
```html
$(document).ready( function(){
$('#your-id').animateCSS("fadeIn");
});
```
## Documentation
```js
{
infinite: false, // True or False
animationClass: "animated", // Can be any class
delay: 0 // Can be any value (in ms)
duration: 1000 // 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, not on every loop.
## Examples
### Basic
```js
$('#your-id').animateCSS('fadeIn');
```
### With callback
```js
$('#your-id').animateCSS('fadeIn', function(){
console.log('Boom! Animation Complete');
});
```
### With delay (in ms)
```js
$('#your-id').animateCSS('fadeIn', {delay: 500});
```
### With delay AND callback
```js
$('#your-id').animateCSS('fadeIn', {
delay: 1000,
callback: function(){
console.log('Boom! Animation Complete');
}
});
```
### With duration (in ms)
```js
$('#your-id').animateCSS('fadeIn', {duration: 3000});
```
### Chain multiple animations
If you use the standard jQuery chaining mechanism, each animation will fire at the same time so you have to include the next animation in the callback.
```js
$('#your-id').animateCSS('fadeInUp', function() {
console.log('Boom! First animation Complete');
$(this).animateCSS("fadeOutUp", function(){
console.log('Boom Boom! Second animation Complete');
})
});
```
### Offset animations
You can offset animations by using the delay mechanism
```js
$('#your-id').animateCSS('fadeIn');
$('#another-id').animateCSS('fadeIn', {delay:100});
```
If you want to hide an element when the page loads and then apply an effect, it might look something like this:
```css
.js #your-id {
visibility:hidden;
}
```
```js
$(window).load( function(){
$('#your-id').animateCSS('fadeIn', function(){
console.log('Boom! Animation Complete');
});
});
```
## Release History
Please consult the official [changelog][changelog]
[changelog]: https://github.com/craigmdennis/animateCSS/blob/master/CHANGELOG.md