当使用jQuery.mouseover时，如何在css动画开始之前停止它（它先动画一秒钟，然后陷入动画状态）

我正在使用wow.js，这是一个轻量级的视差jQuery插件。当您向下滚动页面时，它会在元素进入视图时为其设置动画。它允许属性向动画添加持续时间和延迟，通过将其添加到包含这些属性的元素中（元素也必须具有class=“wow”属性），可以实现这一点：

我使用class=“wow animated fadeInDown”（使用animate.css）在它进入视图时给它一个向下淡入的效果

我的问题是，我在我应用了这个魔兽世界类的元素上有一个悬停效果，我还应用了CSS转换来平滑动画。问题是，当我将鼠标悬停在元素上时，它会上下移动，就像每次都在重新制作动画一样

我尝试过这种方法，它可以停止动画，但要等到动画开始后的一瞬间，它才会陷入尴尬的动画状态：

$(function () {
    $('figure.special-deal').mouseover(function () {
        $(this).removeClass('fadeInDown animated wow');
    });
});

这是小提琴。。。但是停止动画jquery代码（.removeClass（'fadeInDown animated wow'）似乎不起作用

---

还有其他方法可以阻止这种情况发生吗？

是的，现在是分而治之的时候：）

创建一个只作用于悬停的内部div和一个只作用于魔兽世界的外部div

你可以在这里面看到

HTML

---

我建议您通过嵌套div来划分滚动动画和悬停效果。一个div（比如说外部div）负责滚动时的动画，另一个（内部div）负责悬停。谢谢。然而，我发现这是由转换引起的。嗯，我像你建议的那样添加了一个新的内部div。然而，它仍然给出了同样的问题。不过我刚刚发现了真正的问题。。。正是这些转变导致了这种情况。它必须渲染变换旋转过程。无论如何谢谢你！

$(function () {
    $('figure.special-deal').mouseover(function () {
        $(this).removeClass('fadeInDown animated wow');
    });
});

<div class="special-deal wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".3s" style="visibility: visible;-webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s;-webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s;">
    <div class="inner animated">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>
</div>

.special-deal .inner:hover {
   /* visibility: visible;*/
    opacity: .5;
}