JSFiddle - React, Tailwind, and code Playground

by CMeyers

HTML

<div class="contentpane">
    <div class="wrapper">
        <div class="t1"></div>
        <div class="t2"></div>
    </div>
    <a href="#">Test animation</a>
</div>

CSS

.contentpane
{
    width:500px;
    height:250px;
    background-color:lightgreen;
    position:relative;
    left:10px;
    top:10px;
    overflow:hidden;
}

.wrapper
{
    width:500px;
    height:500px;
    background-color:orange;
    position:absolute;
}

.t1
{
    width:500px;
    height:250px;
    background-color:grey;
}

.t2
{
    width:500px;
    height:250px;
    background-color:magenta;
}

a
{
    right: 5px;
    bottom:5px;
    position: absolute;
    z-index: 9999;
}

JavaScript

$(function(){
    $("a").click(buttonClick);
});

var direction=0;
function buttonClick()
{
    if(direction === 0)
    {
        $(".wrapper").animate({top: "-=250px"}, 1000);
        direction = 1;
    }
    else
    {
        $(".wrapper").animate({top: "+=250px"}, 1000);
        direction = 0;
    }
}