JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="timer1" style="height:30px; width:100%; background-color:red">

</div>


<div id="timer2" style="height:30px; width:100%; background-color:blue">

</div>

Click First button, then click second, then click first again
<button onclick="StartTimer1();">
Start Timer1
</button>


<button onclick="StopTimer1();">
Stop Timer1 and Start Timer2
</button>

JavaScript

function StartTimer1() {
    $("#timer1").show().width("100%");

   $("#timer1").hide({
            effect: "blind",
            easing: "linear",
            duration: 5000,
            direction: "left",
            complete: function () {
                
            }
        });
}

function StopTimer1(){
    $("#timer1").stop(true, false);
    
       $("#timer2").hide({
            effect: "blind",
            easing: "linear",
            duration: 2000,
            direction: "left",
            complete: function () {
                
            }
        });
}