Menu
I feel like I have the correct code in order for this to work, but it just isn't doing anything. Am I missing something?
$(document).ready(function() {
$("h2").addClass("animated bounce");
});
Here is my HTML as well.
<head>
<title>Brandon Stranc | Front End Developer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <!-- to scale well with mobile -->
<link rel="stylesheet" type="text/css" href="_css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<!-- <script src="_js/script.js"></script> -->
</head>
<header id="header">
<div class="overlay">
<nav>
<a href="#projects" class="slide-section" title="">Projects</a>
<a href="#about-me" class="slide-section" title="">About Me</a>
<a href="#contact" class="slide-section" title="">Contact</a>
</nav>
<h2>Front End Developer</h2>
<h4>Making Websites for BB ♥</h4>
</div>
</header>
354
jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);
Bounce Animation effect is used to move the element quick up, back, or away from a surface after hitting it.
The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.
add animate.css in page
$(document).ready(function() {
$("h2").addClass("animated bounce");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<header id="header">
<div class="overlay">
<nav>
<a href="#projects" class="slide-section" title="">Projects</a>
<a href="#about-me" class="slide-section" title="">About Me</a>
<a href="#contact" class="slide-section" title="">Contact</a>
</nav>
<h2 >Front End Developer</h2>
<h4>Making Websites for BB ♥</h4>
</div>
</header>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
