JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<div id="animation-one">Hello!</div>
<div id="animation-two">Jquery Animate!</div>
<div id="animation-three">Jquery Animate Again!</div>
<a id="next-page" href="http://www.google.com">Google</a>

CSS

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

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

#animation-three
{
    background-color:orange;
    top: 400px;
}

JavaScript

function animateIn(divId, callback) {
    $(divId).animate(
        {opacity:1.0},
        700,
        callback);
}

function animateOut(divId, callback) {
    $(divId).animate(
        {opacity:0},
        700,
        callback);
}

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

$("#next-page").click(function($event) {
    $event.preventDefault();
    var href = $(this).attr("href");
    
    animateOut("#animation-two");
    
    animateOut("#animation-three", function() {
       animateOut("#animation-one");
   });
});