Jquery 如何将类添加到元素并将其保持在那里，直到鼠标离开animate.css？

我有一个元素，当页面加载时，通过animate.css将动画应用到其中

<div class="logo></div>

一旦执行了上述操作，我希望动画现在在“.logo”悬停时出现：

$(".logo").hover(function () {
  $(this).toggleClass("bounce");
});

但是，在徽标悬停后，“.bounce”类将被删除，并且动画仅在鼠标离开徽标时发生，原因是以下代码：

$('.logo').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  $(this).toggleClass("bounce");
});

---

如何编写代码，使动画不仅在页面加载时发生，而且在徽标悬停时发生，而不是在鼠标离开时发生？

您可以使用

.off（…）

删除第一个附加的事件，然后添加新的悬停事件：

$(".logo").addClass("bounce");

$('.logo').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){

  $(this).removeClass("bounce");

  $('.logo').off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');

  $( ".logo" ).hover(
    function() {
      $( this ).addClass( "bounce" );
    }, function() {
      $( this ).removeClass( "bounce" );
    }
  );

});

---

您可以使用

.off（…）

删除第一个附加的事件，然后添加新的悬停事件：

$(".logo").addClass("bounce");

$('.logo').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){

  $(this).removeClass("bounce");

  $('.logo').off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');

  $( ".logo" ).hover(
    function() {
      $( this ).addClass( "bounce" );
    }, function() {
      $( this ).removeClass( "bounce" );
    }
  );

});

---

这一个让我思考，所以这里有一个免费的，即使已经有一个公认的答案。我开始怀疑是否有一种不用JavaScript的方法可以做到这一点，因为

：hover

显然在CSS中可用

查看animate.css源代码，如果希望动画连续，他们提供的类是

.infinite

，并且只有一条与之相关的规则：

动画迭代计数：infinite

这意味着您可以简单地将该属性添加到
：hover
选择器中，然后您就可以关机并运行了-无需JS

代码笔：

HTML:

另外，如果在SCSS编译中包含animate.css，还可以使用
@extend
语法，这种语法在本例中非常灵活：

.logo:hover {
  @extend .infinite; 
}

这一个让我思考，所以这里有一个免费的，即使已经有一个公认的答案。我开始怀疑是否有一种不用JavaScript的方法可以做到这一点，因为
：hover
显然在CSS中可用

查看animate.css源代码，如果希望动画连续，他们提供的类是
.infinite
，并且只有一条与之相关的规则：
动画迭代计数：infinite

这意味着您可以简单地将该属性添加到
：hover
选择器中，然后您就可以关机并运行了-无需JS

代码笔：

HTML:

另外，如果在SCSS编译中包含animate.css，还可以使用
@extend
语法，这种语法在本例中非常灵活：

.logo:hover {
  @extend .infinite; 
}

您可以使用此插件：我对答案进行了编辑，仅在动画第一次完成后添加新事件。您可以使用此插件：我对答案进行了编辑，仅在动画第一次完成后添加新事件。这正是我所需要的，@signal2013！非常感谢！正是我所需要的，@signal2013！非常感谢！
.logo:hover {
  @extend .infinite; 
}