Plugin to help you use Animate.css with jQuery.
Interactive Demo/Examples: http://renatorib.github.io/janimate/
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.
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
bower install jquery-janimate
<script src="bower_components/jquery-janimate/dist/janimate.min.js"></script>npm install janimate
<script src="node_modules/janimate/dist/janimate.min.js"></script>https://cdn.rawgit.com/renatorib/janimate/master/dist/janimate.min.js
<script src="https://cdn.rawgit.com/renatorib/janimate/master/dist/janimate.min.js"></script>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().
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>janimate example</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/master/animate.css">
</head>
<body>
<h1>Hello jAnimate</h1>
<button class="e1">swing</button>
<button class="e2">shake</button>
<button class="e3">fadeOut</button>
<button class="e4">fadeIn</button>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.rawgit.com/renatorib/janimate/master/dist/janimate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.e1').click(function(){
$('h1').jAnimateOnce('swing');
});
$('.e2').click(function(){
$('h1').jAnimateOnce('shake');
});
$('.e3').click(function(){
$('h1').jAnimate('fadeOut');
});
$('.e4').click(function(){
$('h1').jAnimate('fadeIn', function(self, effect){
alert(effect + ' finish');
});
});
});
</script>
</body>- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent