悬停时的Animate.css

时间:2014-01-17 09:41:25

标签: javascript jquery html css animate.css

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

中实施

但我想确保'效果在:悬停中激活 所以我使用了jquery这个

代码是:

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

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

提前谢谢大家

7 个答案:

答案 0 :(得分:31)

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

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

这个解决方案的好处是它不需要JavaScript。有关参考,请查看此page

答案 1 :(得分:7)

请参阅此变体(更具互动性):

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

答案 2 :(得分:4)

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

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

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

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

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

请参阅此jsFiddle以获取示例

答案 3 :(得分:1)

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

答案 4 :(得分:0)

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

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

 animation-iteration-count:infinite 

到样式表中的动画类。

答案 5 :(得分:0)

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

你可以试试这个:

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

答案 6 :(得分:0)

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

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

}