对网格内的单元进行动画处理以更改其位置

Question

我一直在对网格进行动画处理，如下面的代码所示。我希望div以顺时针方向相互交换位置。

除div移动的行为外，我的代码没有任何错误，它们在网格之外。

var distanceLeft;
var distanceTop;
var myVar;
var c1 = $(".left-top");
var c2 = $(".right-top");
var c3 = $(".right-bottom");
var c4 = $(".left-bottom");

function swapDiv(firstDiv, secondDiv) {
  distanceLeft = secondDiv.offset().left - firstDiv.offset().left;
  distanceTop = secondDiv.offset().top - firstDiv.offset().top;
  firstDiv.animate({
    left: distanceLeft,
    top: distanceTop
  }, 2000)
};

function roll() {
  swapDiv(c1, c2);
  swapDiv(c2, c3);
  swapDiv(c3, c4);
  swapDiv(c4, c1);
};

.grid-container {
  display: grid;
  grid-template-areas: 'left-top  right-top' 'left-bottom right-bottom';
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  ;
  /*grid-gap: 5px;*/
  width: 100%;
  height: 100vh;
  background-color: magenta;
  text-align: center;
}

.left-top {
  grid-area: left-top;
}

.right-top {
  grid-area: right-top;
}

.left-bottom {
  grid-area: left-bottom;
}

.right-bottom {
  grid-area: right-bottom;
}

.grid-container div {
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick=roll() id="swap">SWAP</button>
<div class="grid-container">
  <div class="left-top" style="position: relative">1</div>
  <div class="right-top" style="position: relative">2</div>
  <div class="right-bottom" style="position: relative">3</div>
  <div class="left-bottom" style="position: relative">4</div>
</div>

https://codepen.io/ana-belkis-granados-arozarena/pen/vYBWwNM