在bootstrap4中平稳滑动列

Question

我有三个]，最初我只显示col-md-6和box1，当用户单击box2时，我想显示BTN和{{ 1}}。
但我想在所有框的左侧进行平滑过渡。 我尝试了jquery幻灯片，但没有用。

如何使框向左平滑过渡？

box2

box3

function btnclick() {
  $("#box1").hide("slide", {
    direction: "left"
  }, 1000);
  $("#box3").show("slide", {
    direction: "left"
  }, 1000);
}

Answer 1

function btnclick() {

  $('#box1').animate({
    width: 'toggle'
  }, 2000);
  $('#box3').animate({
    width: 'toggle'
  }, 2000);
}

.box {
  height: 300px;
  border: black;
  border-style: dotted;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button onclick="btnclick()">BTN</button>
<div class="container-fluid">
  <div class="row">
    <div id="box1" class="box col-md-6">Box1</div>
    <div id="box2" class="box col-md-6">Box2</div>
    <div id="box3" class="box col-md-6" style="display:none;">Box3</div>
  </div>
</div>

Answer 2

尝试一下：

$("#box1").hide("slideLeft");

OR

$("#box1").hide("slideUp");