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

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 2

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/