悬停中的 Animate.css答案

【问题标题】：Animate.css in hover悬停中的 Animate.css
【发布时间】：2014-01-17 09:41:24
【问题描述】：

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

但我想确保 ' 效果在以下位置被激活：悬停所以我为此使用了 jquery

代码是：

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

问题是一旦你移开鼠标，'效果就被打断了。即使没有悬停效果，它也可以在它开始后降落？

提前谢谢大家

【问题讨论】：

当你进入/离开元素时会触发悬停事件，你想达到什么目的？
感谢您的回答：当我移除鼠标的效果突然停止时，我想至少完成而不是动作

标签： javascript jquery html css animate.css

【解决方案1】：

在您的 CSS 文件中，您可以添加：

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

这个解决方案的好处是它不需要 JavaScript。参考看看这个page

【讨论】：

这很好，只是你停止悬停的那一刻，动画会被切断。
@MikeLambert 你可以通过在shake 旁边添加关键字infinite 来制作动画infinite：-webkit-animation: shake infinite 1s; animation: shake infinite 1s; 这样它就不会被切断，除非你从元素中删除房子.
只是想评论任何 nubie 阅读，如果您想在按钮中为图标 () 设置动画，您可以执行 button:hover i { 来选择它，以便按钮悬停但仅图标是动画的

【解决方案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/

【讨论】：

你太棒了，这个效果质量更好，更有用，谢谢

【解决方案3】：

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

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

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

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

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

请参阅此jsFiddle 以获取示例

【讨论】：

【解决方案4】：

不要使用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/

【讨论】：

@user3198605 你为什么删除了这个标记？我的解决方案回答你的问题，新接受的答案是别的东西（并从我的解决方案中复制）

【解决方案5】：

我相信您是说一旦鼠标离开动画就会停止，而您正在尝试实现曾经在悬停时开始的动画将继续存在。

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

 animation-iteration-count:infinite

到样式表中的动画类。

【讨论】：

或者添加一个数字而不是无限来指定次数
您是否检查了 animation-duration: 属性 - 看起来您可能必须将其更改为 2s 或您想要达到的任何值。
感谢您的回复，我创建了一个jsfiddle来更好地帮助我您可以将它们写在代码中以便查看和理解'效果？

【解决方案6】：

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

你可以试试这个：

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

【讨论】：

【解决方案7】：

我找到了最佳解决方案。我们必须在任何类上暂停动画，并且我们可以设置动画运行以在该 html 元素上启动该动画 reference

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

【讨论】：