今天我尝试在我的网站上实现animate.css
但我希望确保效果是在悬停时触发的,所以我使用了jquery。
代码如下:
$(".questo").hover( function (e) {
$(this).toggleClass('animated shake', e.type === 'mouseenter');
});
问题在于一旦移开鼠标,'效果就会中断。它能否在没有悬停效果的情况下完成'效果呢?
提前感谢大家
今天我尝试在我的网站上实现animate.css
但我希望确保效果是在悬停时触发的,所以我使用了jquery。
代码如下:
$(".questo").hover( function (e) {
$(this).toggleClass('animated shake', e.type === 'mouseenter');
});
问题在于一旦移开鼠标,'效果就会中断。它能否在没有悬停效果的情况下完成'效果呢?
提前感谢大家
在您的CSS文件中,您只需添加:
.questo:hover {
-webkit-animation: shake 1s;
animation: shake 1s;
}
这个解决方案的好处是它不需要JavaScript。有关详细信息,请参阅此页面。
shake
旁边添加关键字infinite
来使动画变为无限循环:-webkit-animation: shake infinite 1s; animation: shake infinite 1s;
这样它就不会被截断,除非你从元素中移除了房子。 - Waiyl Karimbutton:hover i {
来选择它,以便在悬停按钮时仅对图标进行动画处理。 - Justin查看此变体(更具交互性):
$(".myDiv").hover(function(){
$(this).addClass('animated ' + $(this).data('action'));
});
$(".myDiv").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",function(){
$(this).removeClass('animated ' + $(this).data('action'));
});
$(".questo").mouseEnter(function(event) {
$(this).addClass("animated shake");
});
$(".questo").on("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd", function(event) {
$(this).removeClass("animated shake");
});
我相信你的意思是当鼠标离开后动画停止,你想要实现的是一旦悬停开始就保持动画。
在这种情况下,您必须将动画迭代次数设置为无限。请添加
animation-iteration-count:infinite
。
不要使用toggleClass
,而是在悬停时添加类,并挂接 css3 动画结束后再删除类。
代码:
$(".questo").hover(function (e) {
$(this).addClass('animated shake');
});
$(".questo").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
$(this).removeClass('animated shake');
});
.animatedhover {
animation-play-state: paused;
}
.animatedhover:hover {
animation-play-state: running;
}