JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

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();
    
    // Ação 1: esconder a página
    $(".pagina:eq(0)").hide(Math.random()*1000 + 2000, function() {
        $(".pagina:eq(1)").show(2000);
    });

    // Ação 2: carregar a nova
    $.getJSON('/echo/json/', {
        delay: Math.ceil(Math.random()*3 + 1.00001),
        json: '{"mensagem":"Olá, mundo!"}'
    }).done(function (data) {
        $(".pagina:eq(1)")
            .find("strong")
            .text( /*data.mensagem*/ "Olá, mundo!") // WTF jsFiddle?!
    });
});

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