JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div>
    Lorem ipsum
</div>

CSS

body { margin: 30px; }
div { position: absolute; }

JavaScript

$('div').on("click", function() {

    var slide = 'up';
    
    var div = $(this),
        ani = {},
        proval = slide === 'left' && [ 'left', 30 ] || 
                 slide === 'up' && [ 'top', 30 ] || 
                 slide === 'right' && [ 'left', -30 ] || 
                 slide === 'down' && [ 'top', -30 ];
  

    ani[ proval[0] ] = proval[1],
    ani['opacity'] = 0;

    div.animate( ani , 900 );

});