如何使用jquery重置css动画类？

Question

    $('#btn_color').on('click', function(){
    if($('h1').hasClass('bounceInUp')){

        $('h1').removeClass('bounceInUp');
        $('h1').addClass('tada');

    }else if($('h1').hasClass('tada')){

        $('h1').removeClass('tada');
        $('h1').addClass('tada');

    }
});

当我加载页面时，＆＃39; bounceInUp＆＃39; class已添加到我的h1。 但我希望通过添加“tada”来播放第二个动画片。类。

问题是动画仅在第一次点击时播放。 有没有办法重新加载＆＃34;动画时的“tada”＃39;课程一次又一次地添加？

我用这个来动画我的文字： http://daneden.github.io/animate.css/

Answer 1

动画完成后，你可以jquery的setTimeout删除课程：

setTimeout(function() {
  $('h1').removeClass('tada');
}, 3000); // The length of your animation

Answer 2

被修改

您可以附加animationend事件的单个侦听器，以在动画结束时删除动画类

$(document).on('click', '#btn_color', function (e) {
    $('h1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function (e) {
        $('h1').removeClass('animated bounceInUp');
    });

    $('h1').removeClass('animated bounceInUp').addClass('animated bounceInUp');
});

Demo

Answer 3

用这个简单的代码来做（你必须使用 .width() ）：

$('h1').removeClass('tada');
$('h1').width();
$('h1').addClass('tada');