JSFiddle - React, Tailwind, and code Playground

by nsjithin

HTML

<div class="wrap">
    <div class='object' data-width='100' data-height='150' style="top:10px;left:10px;width:100px;height:150px;background-color: red;"></div>
    <div class='object' data-width='200' data-height='100' style="top:110px;left:160px;width:200px;height:100px;background-color: green;"></div>
    <div class='object' data-width='150' data-height='150' style="top:260px;left:10px;width:150px;height:150px;background-color: blue;"></div>
</div>
<button id="trigger">Shrink</button>
<button id="reset">Reset</button>

CSS

.wrap{
    width:500px;
    height:500px;
    border:solid 1px #ccc;
}
.object{
    position: absolute;
    border:solid 1px #ccc;
}

JavaScript

shrink_ratio = 0.5;
$('button#trigger').click(function(){
    $('.object').each(function(){
        $(this).animate({
            'width' : $(this).data('width')*shrink_ratio + 'px',
            'height' : $(this).data('height')*shrink_ratio + 'px'
        },500);
    });
});
$('button#reset').click(function(){
    $('.object').each(function(){
        $(this).animate({
            'width' : $(this).data('width')*shrink_ratio + 'px',
            'height' : $(this).data('height')*shrink_ratio + 'px'
        },500);
    });
});