JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<div class="click">Click here</div>
<div class="grower"></div>

CSS

.click {background:#ccc; border:1px solid black; padding:10px; display:inline-block}
.grower {width:0; height:0; background:red; position:absolute; top:150px; left:150px;opacity: 0}

JavaScript

var grower = $('.grower');
var flag = 0;

$('.click').click(function() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    var left = windowWidth / 2 - 150;
    var top = windowHeight / 2 - 150;
    var w = 300;
    var h = 300;

    if (flag == 0) {
        grower.css({
            left: left, top: top, width: w, height: h, opacity: 0
        });
        grower
            .show('scale', {percent: 100}, 500, function(){ flag = 1; })
            .animate({'opacity':'1'} , { duration: 500, queue: false, easing: 'easeInCubic'});
    }
    else if (flag == 1) {
        grower
            .hide('scale', {percent: 50}, 500, function(){ flag = 0; })
            .animate({'opacity':'0'} , { duration: 500, queue: false});
    }
});