悬停时的Animate.css

Question

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

但我想确保'效果在:hover中激活所以我使用了jquery

代码是:

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

问题是,一旦你移除鼠标,'效果就会中断.一旦它开始,它甚至可以在没有悬停效应的情况下降低效果？

谢谢大家

Answer 1

在您的CSS文件中,您只需添加:

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

这个解决方案的好处是它不需要JavaScript.有关参考,请参阅此页面

Answer 2

看到这个变种(更具互动性):

$(".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 3

不是在悬停时切换类，而是在鼠标输入时添加它们，像这样

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

然后你可以在动画结束时删除类

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

我会在鼠标进入而不是悬停时执行此操作，因为当鼠标移出元素时您可以触发动画。

以这个jsFiddle为例