I am new to learning JQuery and testing the animations with buttons.
The animated bounce works fine however animated shake does nothing.
I copied the link from https://cdnjs.com/libraries/animate.css
There are 4 links to choose from and I tried all.
I am learning from an online site and have followed all the steps exactly in the tutors video.
All of my code matches but to no avail.
index.js Code
$(document).ready(function() {
$('button').addClass('animated bounce'); //adding the animated bounce class to the button
$('.btn-success').addClass('animated shake');
});
index.html Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.min.css">
<title>Learning JQuery</title>
</head>
<body>
<h1>Learning JQuery</h1>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<button class="btn btn-success target" id="target1">#Target1</button>
<button class="btn btn-primary target" id="target2">#Target2</button>
<button class="btn btn-primary target" id="target3">#Target3</button>
</div>
<div class="col-sm-6">
<button class="btn btn-primary target" id="target4">#Target4</button>
<button class="btn btn-primary target" id="target5">#Target5</button>
<button class="btn btn-primary target" id="target6">#Target6</button>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
New contributor
Sarah Kavanagh is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.