使用左右动态滑动显示和隐藏div

Question

​

$("show-div").on("click", function() {
  $("#first-block").hide();
  $("#second-block").hide();
  $('#third-block').animate({
    //    'right': '100px'
  });
  $('#fourth-block').animate({
    //    ' right': '50px'
  });
})

.count-block-wrap {
  border: 1px solid #000;
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row text-center mx-auto">
  <div class="col-3 col-xl-3" id="first-block">
    <div class="count-block-wrap">
      <div class="figures">
        <span>123</span>
      </div>
      <div class="count-desc">
        <h5>HELLO</h5>
        <p class="mb-0">HELLO</p>
      </div>
    </div>
  </div>
  <div class="col-3 col-xl-3" id="second-block">
    <div class="count-block-wrap">
      <div class="figures">
        <span>123</span>
      </div>
      <div class="count-desc">
        <h5>HELLO</h5>
        <p class="mb-0">HELLO</p>
      </div>
    </div>
  </div>
  <div class="col-3 col-xl-3" id="third-block">
    <div class="count-block-wrap">
      <div class="figures">
        <span>123</span>
      </div>
      <div class="count-desc">
        <h5>HELLO</h5>
        <p class="mb-0">HELLO</p>
      </div>
    </div>
  </div>
  <div class="col-3 col-xl-3" id="fourth-block">
    <div class="count-block-wrap">
      <div class="figures">
        <span>123</span>
      </div>
      <div class="count-desc">
        <h5>HELLO</h5>
        <p class="mb-0">HELLO</p>
      </div>
    </div>
  </div>
</div>
<button onClick="show-div()">Click Me</button>

​

我有四个div。点击一个按钮，我想隐藏前两个(从右向左滑动)，显示最后两个(从左向右滑动)。

Answer 1

应该是：

$("#show-div").on("click", function() {...})

而不是

$("show-div").on("click", function() {...})

和

<button id="show-div">Click Me</button>

而不是

<button onClick="show-div()">Click Me</button>

如下所示：

​

$("#show-div").on("click", function() {
  $("#first-block").hide();
  $("#second-block").hide();
  $('#third-block').animate({
   'right': '100px'
  });
  $('#fourth-block').animate({
    'right': '50px'
  });
})

.count-block-wrap {
  border: 1px solid #000;
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row text-center mx-auto">
  <div class="col-3 col-xl-3" id="first-block">
    <div class="count-block-wrap">
      <div class="figures">
        <span>123</span>
      </div>
      <div class="count-desc">
        <h5>HELLO</h5>
        <p class="mb-0">HELLO</p>
      </div>
    </div>
  </div>
  <div class="col-3 col-xl-3" id="second-block">
    <div class="count-block-wrap">
      <div class="figures">
        <span>123</span>
      </div>
      <div class="count-desc">
        <h5>HELLO</h5>
        <p class="mb-0">HELLO</p>
      </div>
    </div>
  </div>
  <div class="col-3 col-xl-3" id="third-block">
    <div class="count-block-wrap">
      <div class="figures">
        <span>123</span>
      </div>
      <div class="count-desc">
        <h5>HELLO</h5>
        <p class="mb-0">HELLO</p>
      </div>
    </div>
  </div>
  <div class="col-3 col-xl-3" id="fourth-block">
    <div class="count-block-wrap">
      <div class="figures">
        <span>123</span>
      </div>
      <div class="count-desc">
        <h5>HELLO</h5>
        <p class="mb-0">HELLO</p>
      </div>
    </div>
  </div>
</div>
<button id="show-div">Click Me</button>

​