JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="sub-header-main"><span class= "ui-icon-plus">!</span>This is a header</h3>

CSS

.ui-icon-plus{background-color:red;}

.ui-icon-minus{background-color:blue;}

span{
    display:block;
    width:50px;
}

JavaScript

function animatePlusMinus(){
    if ($(this).hasClass("ui-icon-minus")) {
        $(this).queue("goPlus",function(next) {
            $(this).fadeOut(500);
            next();
        })
        .queue("goPlus", function (next) {
            $(this).removeClass("ui-icon-minus").addClass("ui-icon-plus").fadeIn(500);
            //next("goPlus");
        })
        .dequeue("goPlus");
        
    } else if ($(this).hasClass("ui-icon-plus")) {
        $(this)
        .queue("goMinus", function (next) {
            $(this).fadeOut(500);
            next();
        })
        .queue("goMinus", function (next) {
            $(this).removeClass("ui-icon-plus").addClass("ui-icon-minus").fadeIn(500);
            //next();
        })
        .dequeue("goMinus");
        //.dequeue("accPlus");
    }
}
$(document).ready(function() {
    $("h3.sub-header-main span").hover(animatePlusMinus, animatePlusMinus);
});