Animate.css in hover

Question

Today I tried to implement in my site animate.css

But I wanted to make sure that the 'effect is activated in the: hover So I used jquery for this

The code is :

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

The problem is that once you remove the mouse, the 'effect is interrupted. It could land the 'effect even without hover effect once it has begun?

Thank you all in advance

The hover event is fired whe you enter/leave the element, what are you trying to achieve? — Irvin Dominin, Jan 17 '14 at 09:47
Thank you for your answer: when I remove the mouse 's effect stops abruptly,I would like to at least finish instead of the action — user3198605, Jan 17 '14 at 09:53

Ben Leitner · Answer 1 · 2018-01-10T02:00:04.667

44

In your CSS file you could just add:

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

The nice thing about this solution is that it requires no JavaScript. For reference look at this page

edited Jan 10 '18 at 02:00

answered Jul 22 '15 at 18:30

Ben Leitner

1,512
1
10
32

1

This is great, except that the moment you stop hovering, the animation will be cut off. – Mike Lambert Jan 28 '16 at 15:26
1

@MikeLambert you can make the animation `infinite` by adding the keyword `infinite` next to `shake`: `-webkit-animation: shake infinite 1s; animation: shake infinite 1s;` this way it will not be cut off unless you remove the house from the element. – Waiyl Karim Jun 14 '16 at 23:17
Just wanted to comment for any nubie reading that if you want to animate an icon () in a button you can just do `button:hover i {` to select it such that the button is hovered but only the icon is animated – Justin Aug 09 '20 at 20:23

score 9 · Accepted Answer · answered Jan 17 '14 at 11:49

9

See this variant (more interactive):

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

answered Jan 17 '14 at 11:49

DopustimVladimir

162
7

You are a great, this effect is much better quality and much more useful thanks – user3198605 Jan 17 '14 at 13:21

score 4 · Answer 3 · answered Jan 17 '14 at 10:11

Rather than toggle the classes on hover, add them on mouse enter, like this

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

Then you can remove the classes when the animation ends

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

I would do it on mouse enter, rather than hover, because you could trigger the animation when the mouse moves out of the element.

See this jsFiddle for an example

score 1 · Answer 4 · answered Jan 17 '14 at 10:06

1

Instead of use toggleClass, change your code by adding the class in hover, and hook for the animation end css3 to finish and than remove the class.

Code:

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

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

Demo: http://jsfiddle.net/IrvinDominin/xxJ7K/1/

answered Jan 17 '14 at 10:06

Irvin Dominin

29,799
9
75
107

@user3198605 Why have you removed the chackmark? My solution answer you question, the newly accepted answer is something else (and copied from my solution) – Irvin Dominin Jan 20 '14 at 21:08

score 0 · Answer 5 · answered Jan 17 '14 at 09:53

0

I believe you are saying animation stops once the mouse leaves and you are trying to achieve animation that once started on hover would stay on.

In this case you have to set the animation iteration count to infinite. Please add

 animation-iteration-count:infinite

to the animation class in your stylesheet.

answered Jan 17 '14 at 09:53

Spdexter

815
1
7
16

or add a number instead of infinite to specify number of times – Spdexter Jan 17 '14 at 09:55
Have you checked the animation-duration: property - looks like you may have to change it to 2s or whatever you are trying to achieve. – Spdexter Jan 17 '14 at 10:02
Thanks for your response, I created a jsfiddle to help me better You can write them in code so as to see and understand the 'effect? – user3198605 Jan 17 '14 at 10:05

score 0 · Answer 6 · edited Dec 17 '14 at 16:28

0

Assuming you want to add the class when mouse enter and remove the class when mouse leave....

You can try this:

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

edited Dec 17 '14 at 16:28

agriboz

4,247
2
32
46

answered Jan 17 '14 at 10:18

Vivek

4,316
2
15
27

score 0 · Answer 7 · answered Dec 22 '19 at 11:07

i found best solution. we have to pause the animation on any class and also we can set animation s running to start that animation on that html element reference

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

Animate.css in hover

7 Answers7