JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<br />
<br />
<br />
<div id="content">Move</div>

CSS

#content {
    background-color:#68f;
    position:absolute;
    width:100px;
    height:100px;
    padding:3px;
    margin-top:5px;
    left:100px
}

JavaScript

$('html').click(function () {
    // alert("clicked");
    up();


});


function up() {
    $("#content").stop();
    $("#content").animate({
        "top": "-=100px"
    },
        "fast", function () {
        $("#content").stop();
        $("#content").animate({
            "top": "+=1000px"
        },
            1200);
    });

}


function down() {
    $("#content").stop();
    $("#content").animate({
        "top": "+=250px"
    },
        "fast");
}
/*
$("#right").click(function () {
    $("#content").animate({
        "left": "+=50px"
    },
        "slow");
});
$("#left").click(function () {
    $("#content").animate({
        "left": "-=50px"
    },
        "slow");
});

*/