Animate.css在鼠标悬停时的应用

Question

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

但我希望确保效果是在悬停时触发的，所以我使用了jquery。

代码如下：

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

问题在于一旦移开鼠标，'效果就会中断。它能否在没有悬停效果的情况下完成'效果呢？

提前感谢大家

- user3198605

---

当您进入或离开元素时，悬停事件将被触发，您想要实现什么？ - Irvin Dominin

谢谢您的回答：当我移除鼠标时，效果会突然停止，我希望至少能完成动作。 - user3198605

Answer 1

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

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

这个解决方案的好处是它不需要JavaScript。有关详细信息，请参阅此页面。

- Ben Leitner

---

这很棒，但是一旦你停止悬停，动画就会被截断。 - Mike Lambert

@MikeLambert，你可以通过在shake旁边添加关键字infinite来使动画变为无限循环：-webkit-animation: shake infinite 1s; animation: shake infinite 1s;这样它就不会被截断，除非你从元素中移除了房子。 - Waiyl Karim

只是想为任何新手留言，如果您想在按钮中动画显示图标（<i>），您可以只需执行 button:hover i { 来选择它，以便在悬停按钮时仅对图标进行动画处理。 - Justin

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/

- DopustimVladimir

---

你很棒，这个效果质量更好，也更有用。谢谢。 - user3198605

Answer 3

与其在悬停时切换类，不如在鼠标进入时添加它们，就像这样。

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

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

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

我建议使用鼠标进入事件(mouse enter)来触发动画，而不是悬停事件(hover)，因为鼠标移出元素时也可能会触发动画。

可以参考这个jsFiddle示例。

- Martin

Answer 4

我相信你的意思是当鼠标离开后动画停止，你想要实现的是一旦悬停开始就保持动画。

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

 animation-iteration-count:infinite 

在你的样式表中向动画类添加

。

- Spdexter

---

或添加数字来指定次数。 - Spdexter

你有检查过animation-duration属性吗？看起来你可能需要将其更改为2秒或者你想要实现的任何时间。 - Spdexter

感谢您的回复，我创建了一个jsfiddle来帮助我更好地理解。您可以将它们写成代码，以便查看和理解“效果”吗？ - user3198605

Answer 5

不要使用toggleClass，而是在悬停时添加类，并挂接 css3 动画结束后再删除类。

代码：

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

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

示例：http://jsfiddle.net/IrvinDominin/xxJ7K/1/

- Irvin Dominin

---

@user3198605 为什么你移除了勾选标记？我的解决方案回答了你的问题，新接受的答案是另外一种（并且是从我的解决方案复制的）。 - Irvin Dominin

Answer 6

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

您可以尝试这个： $(".questo").hover( function (e) { $(this).addClass('animated shake'); }, function(e){ $(this).removeClass('animated shake'); });

- Vivek

Answer 7

我找到了最好的解决方案。 我们需要在任何类上暂停动画，同时我们还可以设置动画运行以启动该HTML元素上的动画 reference

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

- Darkcoder

---

不，这不是最好的。如果你从元素上移开鼠标，动画会停留在最后一帧，而应该完成动画并在下一个悬停事件上重新开始。 - fdrv