如何在不影响元素大小的情况下使幻灯片更平滑

Question

我有关于幻灯片效果的问题。

这是我的傻瓜：https://jsfiddle.net/3me0cvsa/9/

我注意到在幻灯片过渡期间，元素的大小减少了。我该如何防止这类问题？平滑的滑动，没有看起来不对劲的东西。 jquery正在运行。只是滑动时的结果。是因为hide（）？

＆＃13;

＆＃13;

$("#btn").click(function() {
   $('.box:visible').eq(0).hide('slide', {direction: 'left'}, 1000);
 });

＆＃13;

.container {
  width: 250px;
  height: 250px;
  border: 1px dotted red;
}

.inner-container {
  width: 1250px;
}

.inner-container:after {
  display: block;
  clear: both;
  content: "";
}

.box {
    float: left;
    background: green;
    width: 250px;
    height: 250px;
    opacity: 0.4;
    padding: 104px;
    font-size: 36px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
}

button {
  margin-top: 20px;
}

＆＃13;

<div class="container">
  <div class="inner-container">
    <div class="box box1">
      1
    </div>
    <div class="box box2">
      2
    </div>
    <div class="box box3">
      3
    </div>
    <div class="box box4">
      4
    </div>
    <div class="box box5">
      5
    </div>
  </div>
</div>


<button id="btn">Next Slide</button>

＆＃13;

＆＃13;

＆＃13;