jQuery adicionar apenas uma class em hover

Eu tenho um problema com a adição de apenas uma class no foco sem adicionar os outros. Aqui está o problema:

HTML:

Eu tenho uma function:

 var randomAnim = function(){ var result = Math.floor((Math.random()*9) +1); switch(result) { case 1: result = "jello"; break; case 2: result = "wobble"; break; case 3: result = "tada"; break; case 4: result = "swing"; break; case 5: result = "shake"; break; case 6: result = "rubberBand"; break; case 7: result = "pulse"; break; case 8: result = "bounce"; break; case 9: result = "flip"; break; } return result; }; 

e estou usando aqui:

  $('#playnav').hover(function() { var roll = randomAnim(); $('#playnav').addClass(roll); $(this).on('webkitAnimationEnd mozAnimationEnd animationEnd', function() { setTimeout(function(){ $('#playnav').removeClass(roll); }, 2000); }); }); 

Sua basicamente adicionando animação aleatória para #playnav. O problema é que, se eu passar o mouse sobre o elemento playnav, ele adicionará várias classs – por exemplo, jello, wobble e pulse ao mesmo tempo, o que resulta em animação quebrada.

Então, minha pergunta é: como posso adicionar apenas uma class no foco?

Eu não acho que você quer usar .hover() Eu recomendo. .mouseenter() Troca de palavra única para a correção.

 $('#playnav').mouseenter(function() {... 

Isso só chamará sua function de randomização uma vez, até que o cursor saia e, em seguida, volte a inseri-lo. Na verdade, eu perderia o timer também.

 $('#playnav').mouseenter(function() { var roll = randomAnim(); $('#playnav').addClass(roll); $('#playnav').mouseleave(function() { $('#playnav').removeClass(roll); }); }); 

uma alternativa seria:

 $('#playnav').mouseenter(function() { var roll = randomAnim(); $('#playnav').addClass(roll); }); $('#playnav').mouseleave(function() { $('#playnav').attr('class', 'animated'); }); 

e aqui está um jsfiddle atualizado com biblioteca CSS ligada. Bom efeito. O link da biblioteca = https://rawgit.com/daneden/animate.css/master/animate.css

E se você quisesse dar um passo além e animar cada elemento de forma independente, você poderia fazer isso.

  $('.animated').mouseenter(function() { var roll = randomAnim(); $(this).addClass(roll); $(this).mouseleave(function() { $(this).removeClass(roll); }); }); 

de acordo com o sintoma, o evento hover é triggersdo algumas vezes de alguma forma. alguns problemas que notei no código.

– como user6188402 mencionado, esses códigos de switch podem ser simplificados.

– não faz sentido colocar ‘webkitAnimationEnd mozAnimationEnd animationEnd’ no evento hover;

– no caso, use $ (this) é suficiente, não há necessidade de usar o seletor novamente;

Obrigado a todos pelas respostas. O código que usei:

  $('#playnav').mouseenter(function() { var roll = randomAnim(); $(this).removeClass("jello wobble tada swing shake rubberBand pulse bounce flip").addClass(roll); $(this).on('webkitAnimationEnd mozAnimationEnd animationEnd', function() { setTimeout(function(){ $('#playnav').removeClass(roll); }, 1500); }); }); 

Parece realmente bom, a menos que você esteja pairando sobre o elemento como um louco (isso faz com que a animação pare antes mesmo de terminar).

As animações são do Animate.css ( https://daneden.github.io/animate.css/ );

A class que está causando a animação:

 .animated { animation-duration: 1s; animation-fill-mode: both; }