如何通过相同的按钮点击来一次滑动（动画化）div

Question

如何使用鼠标滚动而不是按钮来对此div进行动画处理，并且在扩展第三个div时，下一个滚动应滚动到下面的部分。

但是，由于这更加复杂，因此我尝试了一个按钮。如果您在单击第一个按钮时检查此代码，将第一个div左移并缩小，将第二个div左移并扩展，则第二次单击应对第二个和第三个div进行相同的操作。

目前，它可以正常工作，但第二个div滞后于第二个按钮的单击。并且仍然可以点击之后，它不会停止动作。如何解决？

注意，演示中的以下代码无法正确显示，编辑器由于某些原因冻结了我的电脑。

jQuery(document).ready(function() {

  jQuery(".dealbutton").click(function() {

    var div = jQuery(".cs-item-1");
    div.animate({
      left: '0px'
    }, "fast");
    div.animate({
      width: '150px'
    }, "fast");

    var div = jQuery(".cs-item-2");
    div.animate({
      left: '270px'
    }, "slow");
    div.animate({
      width: '550px'
    }, "slow");

  })

  jQuery(".dealbutton").click(function() {

    jQuery(this).removeClass('dealbutton');
    jQuery(this).addClass('dealbutton-2');

    jQuery('.dealbutton-2').click(function() {

      var div = jQuery(".cs-item-2");
      div.animate({
        left: '300px'
      }, "fast");
      div.animate({
        width: '150px'
      }, "fast");

      var div = jQuery(".cs-item-3");
      div.animate({
        left: '600px'
      }, "slow");
      div.animate({
        width: '550px'
      }, "slow");

    })

  })

});

section.company-slide {
  height: 100vh;
  background: #EEE;
  width: 100%;
}

.cs-inner {
  margin: 0 auto;
  background: #6371b5;
  height: 400px;
  width: 100vw;
  top: 30vh;
  position: relative;
}

.cs-item-1 {
  width: 550px;
  background: #62a6b5;
  height: 400px;
  float: left;
  margin-right: 70px;
  padding: 50px;
  position: absolute;
  left: 0;
}

.cs-item-2 {
  width: 150px;
  background: #9162b5;
  height: 400px;
  float: left;
  margin-right: 70px;
  padding: 50px;
  position: absolute;
  left: 670px;
}

.cs-item-3 {
  width: 150px;
  background: #b56281;
  height: 400px;
  float: left;
  padding: 50px;
  position: absolute;
  left: 940px;
}

.dealbutton,
.dealbutton-2 {
  background: #000;
  color: #fff;
  z-index: 1;
  width: 100px;
  margin: 0 auto;
  display: block;
  height: 50px;
  position: relative;
  top: 200px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="company-slide">

  <button class="dealbutton">BTN 1</button>

  <div class="cs-inner">

    <div class="container">
      <div class="row">
        <div class="col-sm-12">


          <div class="cs-item-1">
            <h2>Title 1</h2>
          </div>

          <div class="cs-item-2">
            <h2>Title 2</h2>
          </div>

          <div class="cs-item-3">
            <h2>Title 3</h2>
          </div>

        </div>
      </div>
    </div>

  </div>
  <!--end-sc-inner-->

</section>