jQuery只在悬停时添加一个类 [英] jQuery add only one class on hover

问题描述

如果在添加其他人时悬停只添加一个类，则存在问题。问题在于：

HTML：

 < ul id = ulnav > 
< a>< a>< img src =images / nav / play.svgclass =animatedid =playnav/>< / a>< / li> 
< a>< a>< img src =images / nav / home.svgclass =animatedid =homenav/>< / a>< / li> 
< a>< a>< img src =images / nav / mountains.svgclass =animatedid =mountainsnav/>< / a>< / li> 
< a>< a>< img src =images / nav / contact.svgclass =animatedid =contactnav/>< / a>< / li> 
< / ul> 
  

我有一个函数：

  var randomAnim = function（）{
 var result = Math.floor（（Math.random（）* 9）+1）; 
 switch（result）{
 case 1：
 result =jello; 
休息; 
情况2：
结果=摆动; 
休息; 
案例3：
结果=tada; 
休息; 
案例4：
 result =swing; 
休息; 
案例5：
 result =shake; 
休息; 
案例6：
结果=rubberBand; 
休息; 
案例7：
 result =脉冲; 
休息; 
案例8：
结果=反弹; 
休息; 
案例9：
结果=翻转; 
休息; 
} 
返回结果; }; 
  

并在此处使用它：

<$ p $（$＃$）$（'＃playnav'）。hover（function（）{
var roll = randomAnim（）; $ b $（'＃playnav'）。addClass（roll） ;
$（this）.on（'webkitAnimationEnd mozAnimationEnd animationEnd'，function（）{
setTimeout（function（）{
$（'＃playnav'）。removeClass（roll）;
}，2000）;
}）;
}）;

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

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

解决方案

我不认为你想使用 .hover（）我推荐 .mouseenter （）修复的单词交换。

  $（'＃playnav'）。mouseenter函数（）{... 
  

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

  $（'＃playnav'）。mouseenter function（）{
 var roll = randomAnim（）; 
 $（'＃playnav'）。addClass（roll）; 
 $（'＃playnav'）。 
 $（'＃playnav'）。removeClass（roll）; 
}）; 
}）; 
  

另一种方法是：

$ $ $（'＃playnav'）。mouseenter（function （）{
var roll = randomAnim（）;
$（'＃playnav ）.addClass（roll）;
}）;
$（'＃playnav'）。mouseleave（function（）{
$（'＃playnav'）。attr（'class'， '动画'）;
}）;

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

如果您想更进一步，并为每个元素单独设置动画，您可以这样做。

  $（'。animated'）。mouseenter（function（）{
 var roll = randomAnim（）; 
 $（这个）.addClass（roll）; 
 $（this）.mouseleave（function（）{
 $（this）.removeClass（roll）; 
}）; 
}） ; 
  

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.

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

解决方案

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

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

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);
                });
            });

这篇关于jQuery只在悬停时添加一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！