jAnimate
Plugin to help you use Animate.css with jQuery.
Interactive Demo/Examples: http://renatorib.github.io/janimate/
Animate.css
Do not know Animate.css? If you're new to the wonderful world of Animate.css, I highly recommend you visit this link, to see what you can do with Animate.css.
Download & Usage
NOTE: You need have jQuery and Animate.css in your project to use janimate.
You can use janimate with bower
, npm
or download by rawgit file
via bower
bower install jquery-janimate
via npm
npm install janimate
via rawgit cdn
https://cdn.rawgit.com/renatorib/janimate/master/dist/janimate.min.js
Difference between jAnimate and jAnimateOnce
jAnimateOnce()
clean the animation classes when the animation ends, which means that any effect that you do, it will return to normal. Suitable for the purposes of Attention Seekers. Not suitable for when you want the final animation stand, as effects of Exits and Entrances. In these cases, you should use the jAnimate()
.
Basic example
janimate example Hello jAnimate swing shake fadeOut fadeIn
Effects
- bounce
- flash
- pulse
- rubberBand
- shake
- swing
- tada
- wobble
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp