How To Check If One Div Overlapped Another During Transition From One Position To Another

I have added the snippet. Here when the red block reaches the blue block, it should say the alert whereas currently its behaving like they are having the same position from the st

Solution 1:

1. You need to put placePostion inside the setTimeout too, otherwise it will be executed directly and not get the correct positions.
2. You need to use offset instead of position.
3. Because your block is floated you need to add the height to the offset top too.

$(function() {
  $(function() {
    $('#executeButton').click(function() {
      test();
    });

    function coords(dx, dy) {
      var cx = document.getElementById('block').style.marginLeft;
      var cy = document.getElementById('block').style.marginTop;
      cx = parseInt(cx) + 40 * dx;
      cy = parseInt(cy) + 40 * dy;
      if (cx < 0) cx = 0;
      if (cy < 0) cy = 0;
      if (cx > 360) cx = 360;
      if (cy > 360) cy = 360;
      document.getElementById('block').style.marginLeft = cx + 'px';
      document.getElementById('block').style.marginTop = cy + 'px';
    }

    function test() {
      move(4);
      placePostion();

      setTimeout(function() {
        move(4);
        placePostion();
      }, 2000);
      
      setTimeout(function() {
        move(4);
        placePostion();
      }, 4000);

      setTimeout(function() {
        move(2);
        placePostion();
      }, 6000);

      setTimeout(function() {
        move(2);
        placePostion();
      }, 8000);

    }

    function move(id) {
      if (id == '1') {
        coords('0', '-1');
      } else if (id == '2') {
        coords('0', '1');
      } else if (id == '3') {
        coords('-1', '0');
      } else if (id == '4') {
        coords('1', '0');
      }
    }

    function placePostion() {
      var block = $('#block').offset();
      var dest = $('#dest').offset();
      
      if (block.top + $('#block').height() == dest.top && block.left == dest.left) {
        alert("reached");
      }
    }

  });
});

#panel {
  width: 100%;
  height: 100%;
  border-style: solid;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}
#game {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(transparent 39px, #888 39px, transparent 40px), linear-gradient(90deg, transparent 39px, #888 39px, transparent 40px);
  background-size: 40px 40px, 40px 40px;
  border-style: solid;
  float: left;
  margin-right: 10px;
}
#block {
  width: 40px;
  height: 40px;
  float: left;
  transition: 1s;
  background-color: red;
  outline: 1px solid;
}
#dest {
  width: 40px;
  height: 40px;
  background-color: blue;
  outline: 1px solid;
}
#character {
  width: 50px;
  height: 50px;
  outline: 1px solid;
  float: left;
  background-color: red;
  transition: 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<button id="executeButton">Execute</button>
<div id="panel">
  <div id="game">
    <div id="block" style="margin-left: 40px; margin-top: 40px;"></div>
    <div id="dest" style="margin-left: 160px; margin-top: 120px;"></div>
  </div>
</div>