web-dev-qa-db-fra.com

Animate.css en vol stationnaire

Aujourd'hui, j'ai essayé d'implémenter sur mon site animate.css

Mais je voulais m'assurer que l'effet est activé dans le survol. J'ai donc utilisé jquery pour cela 

Le code est:

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

Le problème est qu'une fois que vous enlevez la souris, l'effet est interrompu. Il pourrait atterrir l'effet même sans effet de survol une fois qu'il a commencé?

Merci d'avance à tous

javascriptjqueryhtmlcssanimate.css
14
user3198605

Voir cette variante (plus 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/

7
DopustimVladimir

Dans votre fichier CSS, vous pouvez simplement ajouter:

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

La bonne chose à propos de cette solution est qu’elle ne nécessite aucun JavaScript. Pour référence, regardez cette page

30
Ben Leitner

Plutôt que de basculer les classes en survol, ajoutez-les à la souris, comme ceci

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

Ensuite, vous pouvez supprimer les classes lorsque l'animation se termine

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

Je le ferais en entrant souris plutôt qu'en survol, car vous pourriez déclencher l'animation lorsque la souris sort de l'élément.

Voir ceci jsFiddle pour un exemple

4
Martin

Au lieu d'utiliser toggleClass, modifiez votre code en ajoutant la classe en survol, puis accrochez-vous pour que l'animation termine css3 se termine et que supprime la classe.

Code: 

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

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

Démo: http://jsfiddle.net/IrvinDominin/xxJ7K/1/

1
Irvin Dominin

Je pense que vous dites que l'animation s'arrête une fois que la souris est partie et que vous essayez de réaliser une animation qui, une fois démarrée, resterait active.

Dans ce cas, vous devez définir le nombre d'itérations d'animation sur infini . Veuillez ajouter 

 animation-iteration-count:infinite

à la classe d'animation dans votre feuille de style.

0
Spdexter

En supposant que vous souhaitiez ajouter la classe lorsque la souris entre, et la supprimer lorsque vous quittez la souris ....

Vous pouvez essayer ceci:

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

0
Vivek