jquery - 我如何制作动画，将一个 bootstrap glyphicon 转换为另一个？

Question

我正在使用 Twitter Bootstrap、Animate.css 和 JQuery。我有以下代码:

<a href="#" id="open-right">
  <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
</a>

当您添加“animate fadeOut”或“animate fadeIn”类时，元素将被激活。

我想要做的是，当您单击该按钮时，glyphicon-record 将动画化并替换为 glyphicon-remove-circle。我可以让它以一种方式运行，但是当我单击返回时，我希望它变回录制按钮，但它没有。

这是我目前所拥有的:

 $(document).ready(function() {
    $('#open-right').click(function() {
    $('#open-right span').addClass('animated fadeOut');
    $('#open-right span').removeClass('glyphicon-record animated fadeOut');
    $('#open-right span').addClass('glyphicon-remove-circle animated fadeIn');
    });

})

谁能告诉我如何让它恢复到原来的图标，或者是否有更好的方法来做到这一点？

Answer 1

试试这个:

$(document).ready(function() {
$('#open-right').click(function() {

    if($(this).hasClass("glyphicon-record")
    {
        $('#open-right span').addClass('animated fadeOut');
        $('#open-right span').removeClass('glyphicon-record animated fadeOut');
        $('#open-right span').addClass('glyphicon-remove-circle animated fadeIn');
    }

    else
    {
        $('#open-right span').addClass('animated fadeOut');
        $('#open-right span').removeClass('glyphicon-remove-circle animated fadeOut');
        $('#open-right span').addClass('glyphicon-record animated fadeIn');
    }

});

});