Can't get addClass to work with JQuery

Can't get addClass to work with JQuery
0.0 0

#1

Hello,

Please help! I can’t get the addClass() method to work in JQuery with the code below. What is weird is that if I replace addClass() with fadeOut() the fadeOut method works. What am I doing wrong? Why doesn’t addClass work? Sorry for the poor formatting. I don’t know how this works.

Thanks.

JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
      $('#cross').addClass('animated hinge')
    });

CSS

#matt 
{
  position: relative;
  left: 350px;
  height: 425px;
  width: 550px;
  z-index: 1;
  
}

#cross {
  position: relative;
  right: 125px;
  z-index: 2;
}

HTML

</head>
<h1>My Tribute to Matt Dillahunty</h1>

<div>
<img src='//discourse-user-assets.s3.amazonaws.com/original/3X/7/4/74e7eeadea078af6523e1bdaf48474ddd8ec8f69.png' alt="Picture of Matt Dillahunty" class="center rounded" id="matt"></img>

<img src="http://moziru.com/images/religion-clipart-gold-cross-8.gif" alt="gold cross collapsing" width="300px" height="450px" id="cross"</img>
</div>

#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

Make sure you add the animate.css library in between your <head> and </head> tags.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

#4

Thank you!! You are very kind :slight_smile:


#5

Just to clarify…

The addClass was adding the class “animated hinge”, but since you did not have the animate.css library added, nothing was happening.