JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pagina">Página antiga <a href="#">Trocar</a>
</div>
<div class="pagina">A página nova diz: <strong></strong><br/>
    <a href="#">De novo</a>
</div>

CSS

.pagina {
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

JavaScript

$(".pagina:eq(1)").hide();

$("a:eq(0)").click(function (e) {
    e.preventDefault();

    $.when(
        // Ação 1: esconder a página
        $(".pagina:eq(0)").hide(Math.random()*4000).promise(),
        // Ação 2: carregar a nova
        $.getJSON('http://services.odata.org/OData/OData.svc/Products?$format=json'))
    .then(function ($hidden, jsonRequest) {
        $(".pagina:eq(1)")
            .find("strong")
            .text(jsonRequest[0].value[0].Name)
        $(".pagina:eq(1)").show(2000);
    });
});

$("a:eq(1)").click(function (e) {
    e.preventDefault();
    $(".pagina:eq(0)").show();
    $(".pagina:eq(1)").hide().find('strong').text("");
});