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

Answer 1

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/

Answer 2

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

Answer 3

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

Answer 4

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/

Answer 5

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.

Answer 6

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'); });

Answer 7

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;
}