Skip to content

Instantly share code, notes, and snippets.

@jahanson

jahanson/animatecss.html

Created December 21, 2013 02:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jahanson/8064548 to your computer and use it in GitHub Desktop.
Save jahanson/8064548 to your computer and use it in GitHub Desktop.
Download ZIP
Ready to go sample to add class on animation on click and remove when the animation ends via jQuery.
Raw
animatecss.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animate.css test</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myButton = $('#button');
myButton.click(function () {
myButton.addClass('bounce');
myButton.one('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd',
function(e) {
// code to execute after animation ends
myButton.removeClass('bounce');
});
});
});
</script>
</head>
<body>
<button id="button" class="animated">Hey!</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment