JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<div id="farRight">Far Right</div>
<div id="right">Right</div>
<div id="left">Left</div>
<div id="return">Return</div>

<div id="content">Content</div>

CSS

#content {
    
	position: absolute;
    top: 100px;
}

JavaScript

$("#content").data("originalPosition", $("#content").position());

$("#right").click(function() {
    $("#content").css({
        "left": $("#content").data("originalPosition").left
    }).animate({
        "left": "+=200px"
    }, "slow");
});
$("#left").click(function() {
    $("#content").css({
        "left": $("#content").data("originalPosition").left
    }).animate({
        "left": "-=200px"
    }, "slow");
});
$("#farRight").click(function() {
    $("#content").css({
        "left": $("#content").data("originalPosition").left
    }).animate({
        "left": "+=400px"
    }, "slow");
});
$("#return").click(function() {
    $("#content").animate({
        "left": $("#content").data("originalPosition").left
    }, "slow");
});