时间戳

首页 > 解决方案 > 如何使用jQuery向上滑动隐藏和显示div？

javascript - 如何使用jQuery向上滑动隐藏和显示div？

问题描述

我目前正在做一个需要制作网站的学校项目。对于这个网站，我希望第一个 div 向上滑动并隐藏，然后第二个 div 向上滑动并显示。我花了几个小时在网上寻找，但要么找不到有效的解决方案，要么找不到只能部分有效的解决方案。

这是我目前拥有的代码：

$(document).ready(function() {
  $("#next1").click(function() {
    $("#1").slideUp("slow", function() {
      $("#2").slideDown("slow");
    });
  });
});

$(document).ready(function() {
  $("#next2").click(function() {
    $("#2").slideUp("slow", function() {
      $("#1").slideDown("slow");
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" rel="stylesheet" />


<body>
  <div class="jumbotron">
    <h1 style="text-align:center">Project Pie</h1>
  </div>
  <div id="1">


    <div class="row row-eq-height">
      <div class="col-md-1" style="background-color:hotpink; border: none;">
        <p>Lorem, ipsum dolor.</p>
      </div>
      <div class="col-md-10" style="background-color:white; border: none">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, est.</p>
        <br>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias, error?</p>
        <br>
        <div class="form-group">
          <label>Number People:</label>
          <input type="number">
        </div>
        <br>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis, corporis?</p>
        <br>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id, itaque?</p>
        <br>
        <div class="form-group">
          <label>Number layers:</label>
          <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </div>
      </div>
      <div class="col-md-1" style="background-color:hotpink; border: none">
        <p>Lorem, ipsum dolor.</p>
      </div>
    </div>
    <button id="next1">next</button>
  </div>

  <div id="2" style="display:none;">


    <div class="row row-eq-height">
      <div class="col-md-1" style="background-color:gold; border: none">
        <p>Lorem, ipsum dolor.</p>
      </div>
      <div class="col-md-10" style="background-color:white; border:none">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, est.</p>
        <br>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias, error?</p>
        <br>
        <div class="form-group">
          <label>Number People:</label>
          <input type="number">
        </div>
        <br>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis, corporis?</p>
        <br>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id, itaque?</p>
        <br>
        <div class="form-group">
          <label>Number Layers:</label>
          <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </div>
      </div>
      <div class="col-md-1" style="background-color:gold; border: none;">
        <p>Lorem, ipsum dolor.</p>
      </div>
    </div>
    <button id="next2">next</button>
  </div>
</body>

我希望有人可以帮助我找到可行的解决方案。

标签： javascriptjqueryhtml

解决方案

我想我明白了，这段代码应该可以解决问题：

function slideUp(elementId) {
  var div = $(elementId);
  var height = div.css({
    display: "block"
  }).height();

  div.css({
    overflow: "hidden",
    marginTop: height,
    height: 0
  }).animate({
    marginTop: 0,
    height: height
  }, 500, function() {
    $(this).css({
      display: "",
      overflow: "",
      height: "",
      marginTop: ""
    });
  });
};

$(document).ready(function() {
  $("#next1").click(function() {
    $("#1").slideUp("slow", function() {
      slideUp("#2");
    });
  });
});

$(document).ready(function() {
  $("#next2").click(function() {
    $("#2").slideUp("slow", function() {
      slideUp("#1");
    });
  });
});

推荐阅读