animate.css-jquery
Javascript(jQuery) helper for animate.css), let the animation in the JavaScript to use more simple.
Installation
To install via npm:
npm i animate.css-jquery --saveOr download the latest release package, and unzip it.
USAGE
// 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
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="animate.css-jquery/lib/animate.jquery.min.js"></script> <script> window.animatecssjs({$el: $('#logo')}).then(() => { console.log('执行完成') }); window.animatecssjs('#logo'}).then(() => { console.log('执行完成') }); window.animatecssjs('.div1').then(() => { return animate('.div2') }).then(() => { return animate('.div3') }); </script>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.
该插件由志文工作室开发和维护。
