Javascript 悬停中的Animate.css

今天我尝试在我的网站上实现

但我想确保在：悬停中激活“效果” 所以我使用jquery来实现这一点

代码是：

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

问题是，一旦你移除鼠标，“效果”就会中断。 一旦开始，即使没有悬停效果，它也可以降落“效果”

---

提前谢谢大家

我相信您是说，一旦鼠标离开，动画就会停止，并且您正在尝试实现动画，一旦鼠标悬停，动画就会继续

在这种情况下，必须将动画迭代计数设置为无限。 请加上

 animation-iteration-count:infinite 

---

到样式表中的动画类。

不要使用

切换类

，而是通过在hover中添加类来更改代码，并钩住动画结束css3以完成，然后删除该类

代码：

$(".questo").hover(function (e) {
    $(this).addClass('animated shake');
});

$(".questo").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
    $(this).removeClass('animated shake');
});

---

演示：

不要在鼠标悬停时切换类，而是在鼠标输入时添加它们，如下所示

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

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

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

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

---

查看此示例

假设您希望在鼠标进入时添加类，并在鼠标离开时删除类

您可以尝试以下方法：

$（.questo”）.hover（函数（e）{
$（this.addClass（'animated shake'）；
}，功能（e）{
$（this.removeClass（'animatedshake'）；
});
请参见此变体（更具互动性）：

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

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

这个解决方案的好处在于它不需要JavaScript。参考一下这个
我找到了最好的解决方案。
我们必须暂停任何类上的动画，而且我们还可以设置动画的运行，以在html元素上启动动画

当你进入/离开元素时，会触发悬停事件，你想实现什么？谢谢你的回答：当我移除鼠标时，效果会突然停止，我想至少完成而不是操作，或者添加一个数字而不是无限来指定时间数您是否检查了动画持续时间：属性-看起来您可能必须将其更改为2秒或您尝试实现的任何功能。感谢您的回复，我创建了一个JSFIDLE来帮助我更好地用代码编写它们，以便看到和理解“效果”？你是一个伟大的人，这种效果质量更好，也更有用thanks@user3198605你为什么要去掉这个斑点？我的解决方案回答您的问题，新接受的答案是其他的（并抄袭自我的解决方案）。这很好，除了当您停止悬停，动画将被切断。@MikeLambert您可以通过在
shake
旁边添加关键字
infinite
来制作动画
infinite
：
-webkit animation:shake infinite 1s；动画：摇动无限1s
这样，除非你从元素中移除房屋，否则它不会被切断。只是想对任何nubie阅读发表评论，如果你想在一个按钮中设置图标（）的动画，你只需执行
按钮：悬停i{
来选择它，使按钮悬停，但只有图标被设置动画
.questo:hover {
    -webkit-animation: shake 1s;
    animation: shake 1s;
}

.animatedhover {
  animation-play-state: paused;
}
.animatedhover:hover {
  animation-play-state: running;
}