jquery悬停动画无法正常工作

Question

我正在尝试为与jQuery相关的动画实现代码。不知何故，动画无法正常工作。以下是代码：

＆＃13;

＆＃13;

$(".a").hover(function() {
  $(this).toggleClass("animated slideInUp");
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你应该使用mouseenter而不是悬停：

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