javascript - Animate.css - 将 onmouseover 应用于 div 以添加类

Question

我已经导入了 animate.css 类，它在给出类名时工作得很好，但是当悬停在 div 上时使用应用函数来更改类时它不起作用

  <div id="result" style="width: 100px; height: 100px; background-color: blue; color: white" >
            animated bounce
        </div>

这是脚本

<script>
function animationHover(element, animation) {
    element = $(element);
    element.hover(
        function () {
            element.addClass('animated ' + animation);
        },
        function () {
            //wait for animation to finish before removing classes
            window.setTimeout(function () {
                element.removeClass('animated ' + animation);
            }, 2000);
        }
    );
};
</script>

然后最后调用方法:

animationHover('#result', 'tada');

但这并没有做任何事情

感谢所有帮助

Answer 1

你可以这样简化:

function animationHover(element, animation) {
  $(element).hover(
    function() {
      $(this).addClass('animated ' + animation);
    },
    function() {
      //wait for animation to finish before removing classes
      window.setTimeout(function() {
        $(element).removeClass('animated ' + animation);
      }, 1000);
    }
  );
};
animationHover('#result', 'tada');

.animated {
  animation: anime 2s forwards;
}

.tada {
  background: blue;
  color: red;
}

@keyframes anime {
  to {
    transform: rotate(90deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result" style="width: 100px; height: 100px;">
  animated bounce
</div>

或者像这样:

function animationHover(element, animation) {
  $(element).hover(
    function() {
      $(this).addClass('animated ' + animation)
      .on('animationend',function() {
        $(this).removeClass('animated ' + animation)
      });
    }
  );
};
animationHover('#result', 'tada');

.animated {
  animation: anime 2s forwards;
}

.tada {
  background: blue;
  color: red;
}

@keyframes anime {
  to {
    transform: rotate(90deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result" style="width: 100px; height: 100px;">
  animated bounce
</div>