JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="blue"></div>
    <div id="green"></div>
</div>
<input type="button" value="up" id="button" />

CSS

#container    {position:relative; overflow:hidden; height:50px; width:50px; }
#blue         {height:50px; width:50px; background:#009; position:absolute; top:0; left:0;}
#green        {height:50px; width:50px; background:#090; position:absolute; top:50px; left:0;}

JavaScript

$('#button').toggle(function() {
    $('#green').animate({
        top: 0
    }, 1000, function() {
        $('#button').val('down');
    });
}, function() {
    $('#green').animate({
        top: '50'
    }, 1000, function() {
        $('#button').val('up');
    });
});