https://github.com/lzwme/animate.css-jquery
javascript(jQuery) helper for animate.css, let the animation in the JavaScript to use more simple.
https://github.com/lzwme/animate.css-jquery
animate css
Last synced: about 1 year ago
JSON representation
javascript(jQuery) helper for animate.css, let the animation in the JavaScript to use more simple.
- Host: GitHub
- URL: https://github.com/lzwme/animate.css-jquery
- Owner: lzwme
- License: mit
- Created: 2016-09-15T13:15:27.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-10-17T04:22:23.000Z (over 8 years ago)
- Last Synced: 2025-05-08T21:48:54.801Z (about 1 year ago)
- Topics: animate, css
- Language: JavaScript
- Homepage: http://lzw.me/pages/demo/animate.css-jquery/example
- Size: 35.2 KB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# animate.css-jquery
Javascript(jQuery) helper for [animate.css)](https://daneden.github.io/animate.css), let the animation in the JavaScript to use more simple.
[Demo](http://lzw.me/pages/demo/animate.css-jquery/example)
[![NPM version][npm-image]][npm-url]
[![Dependency Status][david-image]][david-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]
## Installation
To install via npm:
```bash
npm i animate.css-jquery --save
```
Or download the latest [release](https://github.com/lzwme/animate.css-jquery/releases) package, and unzip it.
## USAGE
```js
// example for es6
import animate from 'animate.css-jquery';
import 'animate.css';
animate({$el: $('#logo')}).then(() => {
console.log('执行完成')
});
animate({$el: '.div1:eq(0)', keyword: 'In'}).done((class) => {
console.log(class)
});
animate('.div1:eq(0)', {keyword: /out/i}).done((class) => {
console.log(class)
});
animate({$el: '.div1'}).then(() => {
return animate({$el: '.div2'})
}).then(() => {
return animate({$el: '.div3'})
});
// use as jQuery plugin
$('body').animatecssjs().then((type) => {
console.log('end, animate type: ', type);
});
$('body').animatecssjs('zoomIn');
$('body').animatecssjs({
type: 'shake',
infinite: true
});
```
### Basic Usage
```js
window.animatecssjs({$el: $('#logo')}).then(() => {
console.log('执行完成')
});
window.animatecssjs('#logo'}).then(() => {
console.log('执行完成')
});
window.animatecssjs('.div1').then(() => {
return animate('.div2')
}).then(() => {
return animate('.div3')
});
```
## Options
`$el: null,` Element for animate, jQuery or class\id selector
`type: '',` Animate type, String or Array.
`infinite: false,` Whether animate infinite.
`keyword: '',` Vaild when type='', String or RegExp.
`reset: true,` Reset element class when animate end.
`hideScrollbar: true,` Whether hidden browser scrollbar.
`callback: null,` callback when infinite=false and animate end.
## Note on Patches / Pull Requests
* Fork the project.
* Make your feature addition or bug fix.
* Send me a pull request. Bonus points for topic branches.
## License
animate.css-jquery is released under the MIT license.
该插件由[志文工作室](https://lzw.me)开发和维护。
[npm-image]: https://img.shields.io/npm/v/animate.css-jquery.svg?style=flat-square
[npm-url]: https://npmjs.org/package/animate.css-jquery
[github-tag]: https://img.shields.io/github/tag/lzwme/animate.css-jquery.svg?style=flat-square
[github-url]: https://github.com/lzwme/animate.css-jquery/tags
[travis-image]: https://img.shields.io/travis/lzwme/animate.css-jquery.svg?style=flat-square
[travis-url]: https://travis-ci.org/lzwme/animate.css-jquery
[coveralls-image]: https://img.shields.io/coveralls/lzwme/animate.css-jquery.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/lzwme/animate.css-jquery?branch=master
[david-image]: https://img.shields.io/david/lzwme/animate.css-jquery.svg?style=flat-square
[david-url]: https://david-dm.org/lzwme/animate.css-jquery
[license-image]: https://img.shields.io/npm/l/animate.css-jquery.svg?style=flat-square
[license-url]: LICENSE
[downloads-image]: https://img.shields.io/npm/dm/animate.css-jquery.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/animate.css-jquery