jQuery .animate（）错误我无法修复

Question

我正在学习jQuery，我正在玩它能做什么。我有以下代码：

for(var i=0; i<501; i++) {
  document.write('<div style="width:40px; height:40px; background-color: red; margin: 2px; display: inline-block; float: left;"></div>');
}

$(document).ready(function() {
  $('div').click(function() {
    $(this).animate({
      height: '216px',
      width: '216px'
    }, 'slow');
  }).mouseleave(function() {
    $(this).animate({
      height: '40px',
      width: '40px'
    }, 'slow');
  });
});

我遇到了这个我无法理解的问题。每当我点击一个盒子时，我的左侧都会有一个空的空间。我希望那个大盒子被小盒子包围。

这是小提琴：https://jsfiddle.net/v85wrb6s/

有什么方法可以解决这个问题吗？

谢谢。