悬停中的Animate.css

Question

今天，我尝试在我的站点animate.css中实现

但是，我希望确保“效果”在“悬停”中被激活，因此我使用了jquery。

守则是：

 $(".questo").hover( function (e) {
    $(this).toggleClass('animated shake', e.type === 'mouseenter');
});

问题是，一旦你移除鼠标，效果就会被打断。它可以在没有悬停效果的情况下降落。

，谢谢大家，

Answer 1

见此变体(更具有交互性)：

$(".myDiv").hover(function(){
    $(this).addClass('animated ' + $(this).data('action'));
});
$(".myDiv").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",function(){
    $(this).removeClass('animated ' + $(this).data('action'));
});

http://jsfiddle.net/DopustimVladimir/Vc2ug/

Answer 2

在CSS文件中，您只需添加：

.questo:hover {
    -webkit-animation: shake 1s;
    animation: shake 1s;
}

这个解决方案的好处是它不需要JavaScript。如需参考，请参阅此页面

Answer 3

与其在悬停时切换类，不如在鼠标进入时添加它们，如下所示

$(".questo").mouseEnter(function(event) {
    $(this).addClass("animated shake");
});

然后，您可以在动画结束时删除这些类。

$(".questo").on("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd", function(event) {
    $(this).removeClass("animated shake");
});

我会在鼠标进入，而不是悬停，因为你可以触发动画时，鼠标移动出元素。

有关示例，请参阅此jsFiddle