Animate.css Test

Test applying animate.css animation using jQuery.

by the_voder

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<a href="#" class="social-media">Twitter</a>

CSS

body {
	margin: 50px;
}

.social-media {
	padding: 20px;
	background-color: red;
	display: inline-block;
	position: absolute;
}

JavaScript

$(document).ready(function() {
	// List of possible animate.css classes
	function chooseAnim() {
		var anims = [
			"bounce",
			"flash",
			"pulse",
			"rubberBand",
			"shake",
			"swing",
			"tada",
			"wobble",
			"jello"
		];
		var animIndex = Math.round(Math.random() * (anims.length - 1));
		console.log(anims[animIndex]);
		return anims[animIndex];
	}
	
	$(".social-media").on("mouseover", function() {
		$(this).addClass("animated " + chooseAnim());
	});
	$(".social-media").on("mouseleave", function() {
		// Remove all CSS classes
		$(this).removeClass();
		// Add back in base class
		$(this).addClass("social-media");
	});
});