JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<div id="parent">
  <div id="child1" class='child'>
  </div>
  <div id="child2" class='child'>
  </div>
  <div id="child3" class='child'>
  </div>
  <div id="child4" class='child'>
  </div>
</div>

CSS

#parent {
  background-color: blue;
  color: blue;
  width: 250px;
  height: 250px;
}
.child {
  background-color: red;
  color: red;
  width: 5px;
  height: 5px;
  position: absolute;
}
#child1 {
  top: 50px;
  left: 50px;
}
#child2 {
  top: 100px;
  left: 120px;
}
#child3 {
  top: 120px;
  left: 100px;
}
#child4 {
  top: 140px;
  left: 50px;
}

JavaScript

var fullWidth = parseInt($('#parent').css('width'));
var  fullHeight = parseInt($('#parent').css('height'));
var posMap = {};
$('.child').each(function() {
  var jo = $(this);
  var left = parseInt(jo.css('left'));
  var top = parseInt(jo.css('top'));
  posMap[jo.attr('id')] = {left: left, top: top};
});
var convergePos = {left: 5, top: 5};
var stepfun = function(now,fx) {
  var  width = parseInt($('#parent').css('width'));
  var  height = parseInt($('#parent').css('height'));
  $('.child').each(function() {
    var jobj = $(this);
    var pos = posMap[jobj.attr('id')];
    var top = Math.max(pos.top/fullHeight * height,
                       convergePos.top);
    var left = Math.max(pos.left/fullWidth * width,
                        convergePos.left);
    jobj.css('top',top);
    jobj.css('left',left);
  });
}

$('#parent').animate({width:0,height:0}, {duration:500,step: stepfun});