https://github.com/creative-workflow/jquery.animate.css
Combines animate.css via animate-sass and a jQuery plugin for easy integration.
https://github.com/creative-workflow/jquery.animate.css
Last synced: 19 days ago
JSON representation
Combines animate.css via animate-sass and a jQuery plugin for easy integration.
- Host: GitHub
- URL: https://github.com/creative-workflow/jquery.animate.css
- Owner: creative-workflow
- License: mit
- Created: 2017-11-26T00:50:14.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-28T12:08:35.000Z (about 8 years ago)
- Last Synced: 2025-02-19T05:34:47.603Z (over 1 year ago)
- Language: CoffeeScript
- Size: 48.8 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# jquery.animate.css [](https://travis-ci.org/creative-workflow/jquery.animate.css) [](https://codeclimate.com/github/creative-workflow/jquery.animate.css)
This package makes the usage of the beautiful [https://daneden.github.io/animate.css/](animate.css) very easy by bundling [animate-sass](https://github.com/tgdev/animate-sass) for selective animation style including and a jQuery plugin for easy usage on your website.
Save bandwith and time =)
## Installation
```bash
$ bower install jquery.animate.css --save
```
or
```
$ npm install jquery.animate.css --save
```
## Import into sass
You have to include the animate-sass into your sass sources and enable the animations you want to use later on your website.
A typical sass file looks like:
```sass
// $use-all: true
$use-bounce: true
@import "[path_to_bower_components]/creative-workflow.animate-sass/animate"
```
*Note: For all configurations look at the file [path_to_bower_components]/animate-sass/helpers/_settings.scss*
## Include in your website
Just load the javascript file `[path_to_bower_components]/jquery.animate.css/dist/jquery.animate.css.js`.
*Note: Dont't forgett to include your compiled css file ^^.*
## Usage in javascript
```javascript
$('img').fadeOut(500)
.animateCss('bounceOut', 500);
```
## methods
### animateCss: (animateCssAnimation, [duration=400], [complete=null])
Triggers an [animate.css](https://daneden.github.io/animate.css/) animation included by sass-animate.
* **animateCssAnimation**: The animation that should be triggered.
* **duration**: Animation duration in milli seconds.
* **complete**: An optional callback function when animation finishes.
### Dependencies
* [animate.css](https://github.com/daneden/animate.css/)
* [creative-workflow/animate-sass](https://github.com/creative-workflow/animate-sass)
* [sass](http://sass-lang.com/)
* [jquery](https://jquery.com)
### Resources
* https://github.com/creative-workflow/jquery.animate.css
* https://travis-ci.org/creative-workflow/jquery.animate.css
* https://codeclimate.com/github/creative-workflow/jquery.animate.css
* http://bower.io/search/?q=jquery.animate.css
* https://www.npmjs.com/search?q=jquery.animate.css
### Authors
[Tom Hanoldt](https://www.tomhanoldt.info)
# Contributing
Check out the [Contributing Guidelines](CONTRIBUTING.md)