jQuery在hover时只添加一个类

我有一个问题，即在hover时只添加一个类而不添加其他类。 这是问题所在：

HTML：

我有一个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; }; 

我在这里使用它：

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

它基本上将随机动画添加到#playnav。 问题是，如果我将鼠标hover在playnav元素上，它将同时添加多个类 – 例如jello，wobble和pulse，这会导致动画损坏。

所以我的问题是，如何在hover时只添加一个类？

Answer 1

我不认为你想使用.hover()我建议使用.hover()修复单字交换。

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

这只会调用你的随机函数一次，直到光标离开然后重新进入元素。 事实上，我也失去了计时器。

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

另一种选择是：

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

这里是一个更新的jsfiddle与CSS库链接。效果很好。 图书馆链接= https://rawgit.com/daneden/animate.css/master/animate.css

如果你想更进一步，并独立动画每个元素，你可以做到这一点。

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

Answer 2

根据症状，hover事件以某种方式被激活了几次。 我从代码中注意到的一些问题。

– 如用户6188402所述，可以简化那些开关代码。

– 将’webkitAnimationEnd mozAnimationEnd animationEnd’放在hover事件中没有任何意义;

– 在这种情况下，使用$（this）就足够了，不需要再次使用选择器;

Answer 3

谢谢大家的回复。 我使用的代码：

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

它看起来非常好，除非你像疯了一样hover在元素上（它导致动画在它完成之前停止）。

动画来自Animate.css（ https://daneden.github.io/animate.css/ ）;

导致动画的类：

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