JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">Div One</div>
<div id="div2">Div Two</div>

JavaScript

var element1 = $('#div1');
var element2 = $('#div2');

$(element2).hide();
$(element1).on('click', function () {
    $.when(
        $(element1).fadeOut(1000)
    ).then(function () {
        return $(element2).fadeIn(1000);
    }).then(function () {
        return $(element2).hide();
    }).then(function () {
        return $(element1).fadeIn(1000);
    }).then(function () {
        return $(element1).fadeOut(1000);
    });
});