JSFiddle - React, Tailwind, and code Playground

by Web Carvers

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div></div>

CSS

div{
    position:absolute;
    background:#0077d5;
    width:60px;
    height:40px;
    top:200px;
    left:200px;
}

JavaScript

$(document).on('keypress', function(e){
    if(e.keyCode==32)
    {
        $("div").stop();
        $("div").animate({
            top : ($("div").offset().top - 100)+"px",
        }, 300, "swing", function(){
            $("div").animate({
            top : ($("div").offset().top + 300)+"px"
        }, 800, "easeInOutQuart");
        });
    }
});

$(document).on('mousedown', function(e){
        $("div").stop();
        $("div").animate({
            top : ($("div").offset().top - 100)+"px",
        }, 300, "swing", function(){
            $("div").animate({
            top : ($("div").offset().top + 300)+"px"
        }, 800, "easeInOutQuart");
        });
});