jQuery在悬停时只添加一个类

jQuery add only one class on hover

本文关键字：一个 添加 悬停 jQuery      更新时间：2023-09-26

我有一个问题，在悬停时只添加一个类，而不添加其他类。问题是：

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>

我有一个功能：

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中添加随机动画。问题是，如果我将鼠标悬停在playnav元素上，它会同时添加多个类，例如果冻、抖动和脉冲，这会导致动画中断。

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

我认为您不想使用.hover()，我建议使用.mouseenter()单词交换进行修复。

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

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

如果你想更进一步，独立设置每个元素的动画，你可以这样做。

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

根据症状，悬停事件会以某种方式触发几次。我从代码中注意到了一些问题

-正如user6188402所提到的，这些交换机代码可以被简化。

-在悬停事件中放置"webkitAnimationEnd mozAnimationEnd animationEnd"没有任何意义；

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

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

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

它看起来真的很好，除非你疯狂地悬停在元素上（这会导致动画在完成之前停止）。

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

导致动画的类：

.animated { 
    animation-duration: 1s;
    animation-fill-mode: both;
}
相关文章：