JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="first"></div>
<div id="second"></div>

CSS

div{
    width:100px;
    height:100px;
    border:1px solid red;
    position:absolute;
}
#first{left:0;top:0;}
#second{right:0;bottom:0;}

JavaScript

var q = $({});

function animToQueue(theQueue, selector, animationprops) {
    theQueue.queue(function(next) {
        $(selector).animate(animationprops, next);
    });
}

animToQueue(q, '#first', {
    width: '+=100'
});
animToQueue(q, '#second', {
    height: '+=100'
});
animToQueue(q, '#second', {
    width: '-=50'
});
animToQueue(q, '#first', {
    height: '-=50'
});