animate.css 不适用于 javascript 中的某些类

Question

请帮助我使用 animate.css 和 javascript(jQuery) 在鼠标悬停时为该元素设置动画

这是我尝试过的，但不适用于某些课程，例如。 animate__jello

超文本标记语言

 <span onmouseover="add_efect(this)" > Eat </span>

JS

function add_efect(element){

  element.classList.add('animate__animated', 'animate__jello');

  

  element.addEventListener('animationend', () => {

  element.classList.remove('animate__animated', 'animate__jello');

  });

}

Answer 1

如果您想将<span>元素与 animate.css 一起使用，您需要添加display:inline-block它，或者您可以更改它，<h6>如下所示。<span>元素无法使用 animate.CSS 进行动画处理。要为它们设置动画，您需要为它们提供显示属性。function add_efect(element){&nbsp; element.classList.add('animate__animated', 'animate__jello');&nbsp;&nbsp;&nbsp; element.addEventListener('animationend', () => {&nbsp; element.classList.remove('animate__animated', 'animate__jello');&nbsp; });}<link&nbsp; &nbsp; rel="stylesheet"&nbsp; &nbsp; href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"&nbsp; /><h6 onmouseover="add_efect(this)">Eat</h6><span style='display:inline-block;' onmouseover="add_efect(this)"> Drink </span>