javascript - 在css3中应用动画？

Question

我昨天刚接触到 animate.css，想将它应用到我的网站上。但问题是它只工作了一次，无论我将鼠标悬停在 div 上多少次它都保持不变!也许我没有完全掌握编码技术。这是我的代码:

    window.setTimeout( function(){
   $('#test').removeClass('animated bounce')},
1300);

$(function(){
    $('#test').hover(function(){
            $('#test').addClass('animated bounce');

    });
});

感谢所有建议!

Answer 1

试试这个

$('#test').hover(function(){
    $(this).addClass('animated bounce');

}, function(){
    $(this).removeClass('animated-bounce');
});

甚至更好

  $('#test').hover(function(){
     $(this).addClass('animated-bounce');
  });

  var element = document.getElementById('test');
  element.addEventListener("webkitAnimationEnd", function(){
    $(element).removeClass('animated-bounce');
  }, false);

实际上。

为什么不使用 just do it with css

#test:hover{
   animation: animateName ....;
}

你遇到的问题是，当你添加类时，动画有效，但当你第二次悬停时，它不会再次添加类，因为它已经存在，所以 CSS 不知道当您悬停它时没有更改类名。

Link to Animation Event DOCS

AnimationEnd Demo

CSS :hover Demo