Animate.css无法悬停

Question

为什么在初始页面加载动画后，这个悬停的Animate.css动画不起作用？

$(document).ready(function(){

$("h1").addClass("animated zoomInDown")

$("h1").hover(function(){
$(this).addClass('animated shake');

});

Answer 1

如果您正在使用hover()，请确保您有悬停和悬停事件的处理程序。 CSS动画只有在删除后再重新运行才会重新运行：

＆＃13;

＆＃13;

$(document).ready(function() {

  $("h1").addClass("animated zoomInDown")

  $("h1").hover(function() {
    $(this).addClass('animated shake');
  }, function() {
    $(this).removeClass('animated shake');
  });
});

＆＃13;

h1 {
  background: yellow;
  position: relative;
}

.animated {
  animation: animate-color 0.2s linear;
  animation-iteration-count: 5;
}

@keyframes animate-color {
  0% {
    left: 0;
  }
  50% {
    left: 5px;
    background: red;
  }
  100% {
    left: 0px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello</h1>

＆＃13;

＆＃13;

＆＃13;