CODEWITHSUNDEEP
javascriptjquerycss
Amrit Anand
Amrit Anand

Reputation: 5

jquery hover animations not working properly

I am trying to implement a code for animations related to jQuery. Somehow the animations are not working properly. Below is the code:

$(".a").hover(function() {
  $(this).toggleClass("animated slideInUp");
});
.block-section {
  padding: 50px 0;
}

.footer-links ul {
  margin: 0;
  padding: 0;
}

.footer-links ul li {
  list-style: none;
  display: inline-block;
}

.footer-links ul li a {
  color: #fff;
  background: #E57373;
  height: 45px;
  width: 45px;
  text-align: center;
  border-radius: 50%;
  line-height: 44px;
  font-size: 18px;
  display: block;
  margin: 15px 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet">
<footer class="block-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="footer-links text-center">
          <ul>
            <li><a href="#" class="a"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="a"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="a"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#" class="a"><i class="fa fa-dribbble"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

Upvotes: 0

Views: 68

Answers (1)

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

You shoud use mouseenter instead hover:

<script type="text/javascript">
    $(".a").mouseenter(function () {
        $(this).toggleClass("animated slideInUp");
     });              
</script>

Upvotes: 3

Related Questions