Как скользить (анимировать) делить по одному на одно нажатие кнопки - PullRequest
Новая
       6

Как скользить (анимировать) делить по одному на одно нажатие кнопки

0 голосов
/ 12 февраля 2019

Как вместо кнопки использовать mousescroll для анимации этого div, а когда развернут третий div, следующая прокрутка должна перейти к разделу ниже.

Однако, поскольку это еще сложнее, я попробовал скнопка.Если вы проверите этот код по нажатию 1-й кнопки, переместитесь на 1-е деление влево и уменьшите его, переместитесь на 2-е деление влево и развернитесь, второй щелчок должен сделать то же самое для 2-го и 3-го деления.

На данный момент все работает нормально, но второй 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>
...