Question

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

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

我使用class =“wow animated fadeInDown”（带有animate.css），当它进入视图时，它会向下淡化效果。

我的问题是我将鼠标悬停在我应用此wow类的元素上，我也将CSS转换应用于平滑动画。问题是，当我将鼠标悬停在元素上时，它会上下移动，就像每次重新制作动画一样。

我已经尝试了这个，它可以停止动画，但是直到它开始后不到一秒钟，所以它会陷入一个尴尬的动画状态：

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

这是小提琴......停止动画jquery代码（.removeClass（'fadeInDown animated wow'））似乎不起作用http://jsfiddle.net/DY6GM/

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

Answer 1

是的，它是分裂＆amp;征服时间：）

创建一个内部div，它仅作用于悬停和外部div，仅作用于wow

您可以在此fiddle

中看到

HTML

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

CSS

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

如何在使用jQuery .mouseover之前停止css动画（它首先动画片段，然后卡在动画状态）

1 个答案:

HTML

CSS