jQuery在悬停时只添加一个类

I have a problem with adding only one class on hover without adding the others. Here is the problem:

我有一个问题,即在悬停时只添加一个类而不添加其他类。这是问题所在:

HTML:

<ul id="ulnav">
    <li><a><img src="images/nav/play.svg" class="animated" id="playnav"/></a></li>
    <li><a><img src="images/nav/home.svg" class="animated" id="homenav"/></a></li>
    <li><a><img src="images/nav/mountains.svg" class="animated" id="mountainsnav"/></a></li>
    <li><a><img src="images/nav/contact.svg" class="animated" id="contactnav"/></a></li>
</ul>

I have a 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; };

and im using it here:

我在这里使用它:

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

Its basically adding random animation to #playnav. The problem is that if I hover over the playnav element it will add multiple classes - e.g jello, wobble and pulse at the same time, which results in broken animation.

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

So my question is, how can I add only one class on hover?

所以我的问题是,如何在悬停时只添加一个类?

3 个解决方案

#1

I don't think you want to use .hover() I'd recommend .mouseenter() Single word swap for the fix.

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

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

This will only call your randomization function once, until the cursor leaves and then reenters the element. In fact, I'd lose the timer too.

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

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

an alternative would be:

另一种选择是:

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

and here is an updated jsfiddle with CSS library linked in. Nice effect. The library link = https://rawgit.com/daneden/animate.css/master/animate.css

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

And if you wanted to take it one step further, and animate each element independently, you could do this.

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

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

#2

according to the symptom, hover event gets fired couple of times somehow. some issues i noticed from the code.

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

- as user6188402 mentioned, those switch code can be simplified.

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

- does not make any sense to put 'webkitAnimationEnd mozAnimationEnd animationEnd' in the hover event;

- 将'webkitAnimationEnd mozAnimationEnd animationEnd'放在悬停事件中没有任何意义;

- in the event, use $(this) is enough, no need to use the selector again;

- 在这种情况下,使用$(this)就足够了,不需要再次使用选择器;

#3

Thank you everyone for the responses. The code Ive used:

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

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

It looks really good unless you are hovering over the element like crazy(it causes the animation to stop before its even finished).

它看起来非常好,除非你像疯了一样悬停在元素上(它导致动画在它完成之前停止)。

The animations are from Animate.css (https://daneden.github.io/animate.css/);

动画来自Animate.css(https://daneden.github.io/animate.css/);

The class which is causing the animation :

导致动画的类:

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

#1