Animate.css 悬停不工作

Question

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

$(document).ready(function(){

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

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

});

Answer 1

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

$(document).ready(function() {

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

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

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

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

Animate.css 悬停不工作

Animate.css not working on hover

jquery

animate.css