JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div id="animation-one">Hello!</div>
<div id="animation-two">Jquery Animate!</div>

<a id="next-page" href="http://www.google.com">Google</a>

CSS

#animation-one, 
#animation-two
{
    opacity:0;
    top: 30px;
    width: 400px;
    height: 100px;
    background-color:#00CCCC;
    font-size:35pt;
    position:absolute;
}

#animation-one
{
    background-color:#CCCC33;
    top:130px;
}

JavaScript

$("#animation-one").animate({
    opacity:1.0}, 700, 
    function() {
        $("#animation-two").animate({
            opacity: 1.0
        }, 700);
    }
);

$("#next-page").click(function($event) {
    $event.preventDefault();
    var href = $(this).attr("href");
    
    $("#animation-two").animate({
        opacity: 0}, 700, 
        function() {
            $("#animation-one").animate({
                opacity: 0}, 700, 
                function() {
                    window.location = href;
                });
    })
});