JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post">
    <div class="filler"></div>
    <div class="filler"></div>
    <div class="filler"></div>
    <div class="filler"></div>
    <input id="save" type="image" src="http://emojipedia.org/wp-content/uploads/2013/07/160x160xtennis-racquet-and-ball.png.pagespeed.ic.aacvJSaqx9.jpg">
</form>

CSS

.filler
{
 height:50px;
}

JavaScript

(function () {
    $(document).on('click', '#save', clicked)

    function clicked(myEvent) {
        myEvent.preventDefault()
        var _ball_x = $(this).offset().left;
        var _ball_y = $(this).offset().top;

        //set balls position to absolute and back to its calculated position:
        $(this).css({
            "position": "absolute",
            left: _ball_x,
            top: _ball_y
        });
        var local = {}
        local.width = ["50px", "swing"]
        local.height = ["50px", "swing"]
        local.top = "-64px"
        $(this).animate(local, "slow")
    }
})()