动画结束后如何删除类?

时间:2015-12-03 16:56:05

标签: jquery css animate.css

我有jQuery代码,如下所示;

$(document).ready(function() {
 $("#btn").on("click",function(){
    $(".article_heading").addClass("animated bounce",function(){
        $(".article_heading").removeClass("animated bounce");
    });
 });
});

我的问题在于animate.css.and我不能多次播放animate.css因为我想用jquery解决这个问题,就像你在顶部看到的那样但当我添加动画弹跳类时它我的动画结束后必须删除。这是不可能的吗?我无法做那个回调,其他方式可以帮助我解决这个问题

1 个答案:

答案 0 :(得分:3)

添加类后,您可以监听animationend事件,然后在animationend被触发时删除回调中的类和事件侦听器。

$("#btn").on("click", function() {
  $(".article_heading").addClass("animated bounce").on('animationend', function (e) {
    $(this).removeClass("animated bounce").off('animationend');
  });
});

您还可以使用.one()附加事件,以便仅触发一次(这意味着不需要在回调中删除处理程序)。

$("#btn").on("click", function() {
  $(".article_heading").addClass("animated bounce").one('animationend', function (e) {
    $(this).removeClass("animated bounce");
  });
});