Question

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

中实施

但我想确保'效果在：悬停中激活所以我使用了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。有关参考，请查看此page

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以获取示例

Answer 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/

Answer 5

我相信你说动画一旦鼠标离开就会停止，你试图实现一旦开始悬停就会继续保持动画。

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

 animation-iteration-count:infinite

到样式表中的动画类。

Answer 6

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

你可以试试这个：

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

Answer 7

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

export class CharacterWithCommasPipe implements PipeTransform {
  transform(array) {
    return array.map(item => item.name).join(', ');
  }

}

悬停时的Animate.css

7 个答案: